使用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:[], }
内容版权声明:除非注明,否则皆为本站原创文章。