vue-ele-form-table-editor 做为 vue-ele-form 的第三方扩展, 通过对 ele-table-editor 的封装, 做到了表格编辑的双向绑定功能
yarn add vue-ele-form-table-editor或者
npm install vue-ele-form-table-editor --saveimport EleForm from "vue-ele-form"; import EleFormTableEditor from "vue-ele-form-table-editor"; // 注册 table-editor 组件 Vue.component("table-editor", EleFormTableEditor); // 注册 ele-form Vue.use(EleForm, { // 专门设置全局的 table-editor 属性 // 属性参考: https://github.com/dream2023/ele-table-editor 或者 下面的属性说明 "table-editor": { isShowDelete: false // 所有的 table-editor 都会有 isShowDelete = false 的属性值, 即不显示删除按钮 } });局部注册和使用请参考: https://www.yuque.com/chaojie-vjiel/vbwzgu/inlpxy#I5kdQ
formDesc: { xxx: { label: 'xxx', // 只需要在这里指定为 table-editor 即可 type: 'table-editor', // 属性参考: https://github.com/dream2023/ele-table-editor 或者 下面的属性说明 attrs: { isShowDelete: false, // 校检规则写这里 rules: { name: { required: true, message: '姓名必填' }, // ... }, // 表格列 columns: [ { // attrs 为 el-table-column 的属性 attrs: { prop: 'age', // el-table-column 的 prop 属性 label: '年龄', // el-table-column 的 label 属性 // ... }, // content 为table-column的内容, 可以省略, 省略的话就是显示文本 // content 类型可以为对象(单个内容比如单个input框), 和 数组 (多个input框) // 具体可参考示例 content: {} // [] } ] } } }<template> <el-card header="ele-form-table-editor 演示" shadow="never" style="max-width: 1250px;min-height: 1000px;margin: 20px auto;" > <ele-form :form-data="formData" :form-desc="formDesc" :span="22" :request-fn="handleRequest" @request-success="handleSuccess" ></ele-form> </el-card> </template> <script> export default { data() { return { formData: { class: "三年级二班", students: [ { grade: "三年级二班", name: "小张", sex: 1, tuition: 2000, unPay: 100, dream: "" } ] }, formDesc: { class: { label: "所属班级", type: "input", attrs: { disabled: true } }, students: { label: "学员", type: "table-editor", attrs: { // 校检规则 rules: { name: { required: true, message: "姓名必填" }, tuition: { required: true, message: "已缴纳金额必填" } }, // 其它按钮 extraBtns: [ { // text 按钮显示的文本 text: "关联", // 按钮的属性 attrs: { type: "text" }, // click事件 click(scope) { /* eslint-disable */ console.log(scope); } } ], // 表格列 columns: [ { // el-table-column 的属性 type: "index", width: 50 }, { // el-table-column 的属性 prop: "grade", label: "年级" }, { prop: "name", label: "姓名", // 当有 content 属性时, 可以指定相应的组件 content: { // type 可以为全局注册的组件名或者组件引用 type: "el-input", // attrs 是组件的属性 attrs: { placeholder: "学员姓名" } // 此外还有 // 具体使用参考: https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1 // style: {}, // 组件的样式 // class: {}, // 组件的class // on: {} // 组件的事件 // slots: {}, // 插槽 // scopedSlots: {}, // 作用域插槽 } }, { prop: "sex", label: "性别", width: 50, // 用于格式化枚举文本 options: { 1: "男", 2: "女" } }, { label: "缴费", width: 340, // content 可以为数组 content: [ "已缴纳: ", // 数组可以是 组件 和 普通字符串 混用 { type: "el-input", valueKey: "tuition", // 当content为数组时, 必须制定组件绑定 的 key style: { width: "100px", marginRight: "10px" } }, "未缴纳: ", { type: "el-input", valueKey: "unPay", // 这里也需要绑定 key style: { width: "100px" } } ] }, { prop: "dream", label: "梦想", content: { type: "el-radio-group", // 对于 el-select, el-checkbox-group, el-radio-group 三个组件 // 可以指定 options 数组进行选项的渲染 options: [ // option 的值可以为对象 // 此处对以上三个组件做了封装, 显示的key为 text, 值key为 value { text: "科学家", value: "scientist" }, { text: "警察", value: "policeman" }, // 也可以指定为字符串, 则会转化为 '程序员' => { text: '程序员', value: '程序员' } "程序员" ] } }, { prop: "birthplace", label: "籍贯", content: { type: "el-select", // 如果 key 不是 text 和 value // 可以使用 prop 指定 key options: [ { name: "北京", id: "beijing" }, { name: "上海", id: "shanghai" }, { name: "广州", id: "guangzhou" } ], // prop 将 text 对应 name, value 对应 id prop: { text: "name", value: "id" } } } ], // 新行默认值 newColumnValue: { grade: "三年级二班", sex: 2 } } } } }; }, methods: { handleRequest(data) { console.log(data); return Promise.resolve(); }, handleSuccess() { this.$message.success("提交成功"); } } }; </script> <style> body { background-color: #f0f2f5; } </style>attrs: { // 表格的属性 tableAttrs: { type: Object, default: () => ({ border: true }) }, // 表格事件 tableOn: { type: Object }, // 表单数据 value: { type: Array, default: () => [] }, // 是否显示删除 isShowDelete: { type: Boolean, default: true }, // 删除按钮属性 deleteBtnAttr: { type: Object, default () { return { type: 'text' } } }, // 右侧其它按钮 extraBtns: { type: Array, default: null }, // table 列 columns: { type: Array, default: () => [] }, // 校检规则 rules: Object, // 禁用 (对所有input框禁用)) disabled: { type: Boolean, default: false }, // 新增列的值 newColumnValue: { type: Object, default: () => ({}) }, // 是否显示新增按钮 isShowAdd: { type: Boolean, default: true }, // 新增按钮文本 addBtnText: { type: String, default: '新增' } }columns: [ { // attrs 为 el-table-column 的属性 + content // el-table-column 的属性具体参考: https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes prop: 'name', // el-table-column 的 prop 属性 label: '姓名', // el-table-column 的 label 属性 width: 200, // el-table-column 的 width 属性 vif: true, // el-table-column 是否显示，可以为函数 // ... // column 的内容, 可省略, 省略时为显示字符串 // column 的类型可以为对象或者对象数组, 例如 content: { // 渲染的组件, 可以为全局注册的组件名称或者直接组件的引用 type: 'el-select', valueKey: 'xxx', // 绑定的tableData 的key // select, checkbox, radio 三个组件特有的属性 // 用于指定选项 options: [ { text: '北京', value: 'beijing' }, { text: '上海', value: 'shanghai'} ] // 同上, 用于当 options的key不是 text 和 value 时指定key和value prop: { text: 'name', value: 'id' }, // 组件属性 attrs: { size: 'medium', // ... }, // 可以为函数，根据数据判断 attrs(scope, tableData) { return { disabled: scope.$index === 1 ? true : false } }, // change 事件 change (val, row, index) { console.log(val, row, index) }, // 组件样式 style: { width: '200px', // ... }, // 组件 class class: 'my-custom-select', // 组件事件 on: { change(value) { console.log(value) }, // ... }, // 组件插槽 slots: { default (h) { return [ h('el-option', { attrs: { label: '男', value: 1 } }), h('el-option', { attrs: { label: '女', value: 2 } }) ] } }, // 作用域插槽 scopedSlots: { test (h, data) { // data 为传递过来的参数 return h('div', 'test') } } }, // 此属性, 仅当当未指定 content 时, 用于格式化文本 // status: 1 , options为枚举 options: { 1: '正常', 2: '禁用' } ]