使用Vue动态生成form表单的实例代码(3)

validate 表单验证规则,具体配置查看 : https://github.com/yiminghe/async-validator

radio 单选框

radioRule :
{
  type:"radio",//必填!
  //label名称
  title:"是否包邮",//必填!
  //字段名称
  field:"is_postage",//必填!
  //input值
  value:"0",
  //可选参数
  options:[
   {value:"0",label:"不包邮",disabled:false},
   {value:"1",label:"包邮",disabled:true},
  ],//必填!
  props: {
   //可选值为 button 或不填,为 button 时使用按钮样式
   "type":undefined, 
   //单选框的尺寸,可选值为 large、small、default 或者不设置
   "size":"default", 
   //是否垂直排列,按钮样式下无效
   "vertical":false, 
  },
  event:{
   //在选项状态发生改变时触发,返回当前状态。通过修改外部的数据改变时不会触发
   change:(...arg)=>{},
  },
  validate:[],
 }

checkbox 复选框

checkboxRule :
{
  type:"checkbox",//必填!
  //label名称
  title:"标签",//必填!
  //字段名称
  field:"label",//必填!
  //input值
  value:[
   "1","2","3"
  ],
  //可选参数
  options:[
   {value:"1",label:"好用",disabled:true},
   {value:"2",label:"方便",disabled:false},
   {value:"3",label:"实用",disabled:false},
   {value:"4",label:"有效",disabled:false},
  ],//必填!
  props: {
   //多选框组的尺寸,可选值为 large、small、default 或者不设置
   "size":"default", 
  },
  event:{
   //只在单独使用时有效。在选项状态发生改变时触发,通过修改外部的数据改变时不会触发
   change:(...arg)=>{},
  },
  validate:[],
 }

select 选择器

selectRule :
{
  type: "select",//必填!
  field: "cate_id",//必填!
  title: "产品分类",//必填!
  //input值
  value: ["104","105"],
  //可选参数
  options: [
   {"value": "104", "label": "生态蔬菜", "disabled": false},
   {"value": "105", "label": "新鲜水果", "disabled": false},
  ],//必填!
  props: {
    //是否支持多选
   "multiple": true, 
   //是否可以清空选项,只在单选时有效
   "clearable": false,
   //是否支持搜索
   "filterable": true, 
   // 暂不支持远程搜索
   // "remote": false, //是否使用远程搜索
   // "remote-method":Function, //远程搜索的方法
   // "loading": false, //当前是否正在远程搜索
   // "loading-text": "加载中", //远程搜索中的文字提示
   //选择框大小,可选值为large、small、default或者不填
   "size":"default", 
   //选择框默认文字
   "placeholder": "请选择", 
    //当下拉列表为空时显示的内容
   "not-found-text": "无匹配数据",
   //弹窗的展开方向,可选值为 bottom 和 top
   "placement": "bottom", 
   //是否禁用
   "disabled": false, 
  },
  event:{
   //选中的Option变化时触发,返回 value
   change:(checked)=>{},
   //搜索词改变时触发
   'query-change':(keyword)=>{},
  },
  validate:[],
 }
      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/174.html