element-ui form表单,table二次封装
使用方法 npm i zx-lib -S
element-ui form表单,table二次封装
表单中现在 封装了如图所示的这些组件,组件只是将elemen中的组件进行了封装,方便使用,
form中预留slot插槽,可以根据自己需要,放置不同组件,使用如下:
用法详解
form 采用了el-row el-col 布局 formCols形式为[ [ ] ,[ ] ,[ ] ] ,每个中括号代表一行
eType 代表类型 noSohw 代表是否展示 span 代表 占比
其中 checkbox radio select 添加options 属性 option可以为options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}], options: '手机,电脑', options: ['手机', '电脑']
表单中的change以及click事件会统一发送出来 可自行根据prop 的值来分别处理,当 prop 为submit 时会校验rule 当prop 为reset时,会清空数据,还原初始值
可以通过this.$refs 设置里面字段值
//设置是否展示 setNoShow(prop, value) { this.setNewValue(prop, "noShow", value) }, //设置radio checkbox options值 setOptions(prop, value) { this.setNewValue(prop, "options", value) }, /** * 改变二维数组中某个值 * @param prop 数组中唯一标识值 * @param key 需要修改的字段 * @param value 需要修改的值 */ setNewValue(prop, key, value) { let two = -1; let one = this.formCols.findIndex(item => { let iIndex = item.findIndex(iItem => { return iItem.prop === prop }) if (iIndex !== -1) { two = iIndex return true } }) if (one === -1 || two === -1) { console.log('找不到要设置的字段') return } this.$set(this.formCols[one][two], key, value) }复制代码
formCols: [ [ { eType: 'Input', placeholder: "请输入姓名", label: "Input", prop: 'name1', noShow: false, span: 6, suffixIcon: "el-icon-eleme" }, {eType: 'slot', label: "自定义slot", slotName: "test", prop: 'date5', span: 6,}, { eType: 'Radio', label: "Radio", options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}], prop: 'date10', span: 6, }, { eType: 'RadioButton', label: "RadioButton", options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}], prop: 'date11', span: 6, }, ], [ { eType: 'InputNumber', label: "InputNumber", prop: 'date16', span: 6, }, { eType: 'CheckButton', label: "CheckButton", noShow: false, // options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}], // options: '手机,电脑', options: ['手机', '电脑'], prop: 'date15', span: 6, }, { eType: 'Check', label: "CheckBox", // options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}], options: '手机,电脑', prop: 'date13', span: 6, }, { eType: 'DatePicker', type: 'year', label: "year", valueFormat: "yyyy", prop: 'date18', span: 6, }, ], [ { eType: 'Select', label: "Select", options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}], prop: 'date17', span: 6, }, { eType: 'DatePicker', type: 'date', label: "date", valueFormat: "yyyy-MM-dd", prop: 'date19', span: 6, }, { eType: 'DatePicker', type: 'datetime', label: "datetime", valueFormat: "yyyy-MM-dd hh:mm:ss", prop: 'date20', span: 6, }, ], [ { eType: 'DatePicker', type: 'daterange', label: "daterange", valueFormat: "yyyy-MM-dd", prop: 'date21', span: 6, }, { eType: 'DatePicker', type: 'datetimerange', label: "datetimerange", valueFormat: "yyyy-MM-dd hh:mm:ss", prop: 'date22', span: 6, }, { eType: 'DatePicker', type: 'dates', label: "dates", valueFormat: "yyyy-MM-dd", prop: 'date23', span: 6, }, { eType: 'TimePicker', label: "TimePicker", prop: 'date24', noShow: false, span: 6, }, ], [ { eType: 'Switch', label: "Switch", prop: 'date25', span: 6, }, { eType: 'Slider', label: "Slider", prop: 'date26', noShow: false, span: 12, }, ], [{eType: 'Button', value: "提交", type: "success", prop: 'submit', span: 2,}, {eType: 'Button', value: "重置", type: "success", prop: 'reset', span: 2,}] ],
作者:Web_宁缺
链接:https://juejin.cn/post/7034816442113458183