template div p vxe-button clickinsertEvent()新增/vxe-button vxe-button clicksaveEvent保存/vxe-button /p vxe-table border show-overflow reftableRef max-height400 :column-config{ resizable: true } :datatableData :edit-config{ trigger: click, mode: row, activeMethod: activeMethod } :edit-rules{ description: [{ required: true, message: 请输入数字 }, { validator: descriptionValidator }], note: [{ validator: noteValidator }] } vxe-column typeseq width60/vxe-column vxe-column fieldcategory title类别 :edit-render{} template #default{ row } span{{ formatLabel(row.category, categoryList) }}/span /template template #edit{ row } vxe-select v-modelrow.category :optionscategoryList transfer changecategoryChangeEvent(row)/vxe-select /template /vxe-column vxe-column fielddescription title描述 :edit-render{} template #edit{ row } vxe-input v-modelrow.description typetext/vxe-input /template /vxe-column vxe-column fieldlevel title比较符号 :edit-render{} template #default{ row } span{{ formatLabel(row.level, levelList) }}/span /template template #edit{ row } vxe-select v-modelrow.level :optionslevelList transfer/vxe-select /template /vxe-column vxe-column fieldremark title备注 :edit-render{} template #edit{ row } vxe-input v-modelrow.remark typetext :readonlyrow.category 4/vxe-input /template /vxe-column vxe-column fieldstatus title状态 :edit-render{} template #default{ row } span v-ifrow.category ! 1{{ formatLabel(row.status, allStatusList) }}/span /template template #edit{ row } vxe-select v-ifrow.category ! 1 v-modelrow.status :optionsgetStatusList(row.category) transfer/vxe-select /template /vxe-column vxe-column fieldcontent title内容 :edit-render{} template #default{ row } span v-ifrow.category ! 1{{ row.content }}/span /template template #edit{ row } vxe-input v-ifrow.category ! 1 v-modelrow.content typetext/vxe-input /template /vxe-column vxe-column fieldtype title类型 :edit-render{} template #default{ row } span v-ifrow.category ! 1{{ formatLabel(row.type, typeList) }}/span /template template #edit{ row } vxe-select v-ifrow.category ! 1 v-modelrow.type :optionstypeList transfer/vxe-select /template /vxe-column vxe-column fieldnote title说明 :edit-render{} template #default{ row } span v-ifrow.category ! 1{{ row.note }}/span /template template #edit{ row } vxe-input v-ifrow.category ! 1 v-modelrow.note typetext/vxe-input /template /vxe-column vxe-column title操作 width80 template #default{ row } vxe-button typetext statusdanger clickdeleteEvent(row)删除/vxe-button /template /vxe-column /vxe-table /div /template script setup import { ref } from vue const tableRef ref() const tableData ref([ { id: 10001, category: 1, description: 描述一, level: 1, remark: 备注一, status: 1, content: 内容一, type: 1, note: 说明一 }, { id: 10002, category: 2, description: 描述二, level: 2, remark: 备注二, status: 2, content: 内容二, type: 2, note: 说明二 }, { id: 10003, category: 3, description: 描述三, level: 3, remark: 备注三, status: 1, content: 内容三, type: 3, note: 说明三 }, { id: 10004, category: 1, description: 描述四, level: 1, remark: 备注四, status: 2, content: 内容四, type: 1, note: 说明四 } ]) const categoryList ref([ { label: 类别A, value: 1 }, { label: 类别B, value: 2 }, { label: 类别C, value: 3 }, { label: 类别D, value: 4 } ]) const levelList ref([ { label: , value: }, { label: , value: } ]) const allStatusList [ { label: 进行中, value: 1 }, { label: 已完成, value: 2 }, { label: 已暂停, value: 3 } ] const getStatusList (category) { if (category 2) { return allStatusList.filter(item [1, 2].includes(item.value)) } if (category 3) { return allStatusList.filter(item [2, 3].includes(item.value)) } return allStatusList } const typeList ref([ { label: 类型X, value: 1 }, { label: 类型Y, value: 2 }, { label: 类型Z, value: 3 } ]) const formatLabel (value, list) { const item list.find((item) item.value value) return item ? item.label : value } const insertEvent () { const $table tableRef.value if ($table) { $table.insert({ category: 1 }) } } const deleteEvent (row) { const $table tableRef.value if ($table) { $table.remove(row) } } const saveEvent () { const $table tableRef.value if ($table) { $table.validate(true).then(() { console.log(JSON.stringify(tableData.value, null, 2)) }).catch(errMap { console.log(校验不通过, errMap) }) } } const descriptionValidator ({ cellValue }) { if (cellValue || cellValue null || cellValue undefined) { return new Error(请输入数字) } if (isNaN(Number(cellValue))) { return new Error(只能输入数字) } if (Number(cellValue) 0) { return new Error(数字必须大于等于0) } } const noteValidator ({ row, cellValue }) { if (row.category 1) { return true } if (cellValue || cellValue null || cellValue undefined) { return new Error(请输入数字) } if (isNaN(Number(cellValue))) { return new Error(只能输入数字) } } const categoryChangeEvent (row) { row.status if (row.category 1) { console.log(选择了类别A) } else if (row.category 2) { console.log(选择了类别B) } else if (row.category 3) { console.log(选择了类别C) } else if (row.category 4) { console.log(选择了类别D) row.remark 类别四 } } const activeMethod ({ row, column }) { if (row.category 1) { const disabledFields [status, content, type, note] return !disabledFields.includes(column.field) } if (row.category 4 column.field remark) { return false } return true } /script
可编辑联动表格
template div p vxe-button clickinsertEvent()新增/vxe-button vxe-button clicksaveEvent保存/vxe-button /p vxe-table border show-overflow reftableRef max-height400 :column-config{ resizable: true } :datatableData :edit-config{ trigger: click, mode: row, activeMethod: activeMethod } :edit-rules{ description: [{ required: true, message: 请输入数字 }, { validator: descriptionValidator }], note: [{ validator: noteValidator }] } vxe-column typeseq width60/vxe-column vxe-column fieldcategory title类别 :edit-render{} template #default{ row } span{{ formatLabel(row.category, categoryList) }}/span /template template #edit{ row } vxe-select v-modelrow.category :optionscategoryList transfer changecategoryChangeEvent(row)/vxe-select /template /vxe-column vxe-column fielddescription title描述 :edit-render{} template #edit{ row } vxe-input v-modelrow.description typetext/vxe-input /template /vxe-column vxe-column fieldlevel title比较符号 :edit-render{} template #default{ row } span{{ formatLabel(row.level, levelList) }}/span /template template #edit{ row } vxe-select v-modelrow.level :optionslevelList transfer/vxe-select /template /vxe-column vxe-column fieldremark title备注 :edit-render{} template #edit{ row } vxe-input v-modelrow.remark typetext :readonlyrow.category 4/vxe-input /template /vxe-column vxe-column fieldstatus title状态 :edit-render{} template #default{ row } span v-ifrow.category ! 1{{ formatLabel(row.status, allStatusList) }}/span /template template #edit{ row } vxe-select v-ifrow.category ! 1 v-modelrow.status :optionsgetStatusList(row.category) transfer/vxe-select /template /vxe-column vxe-column fieldcontent title内容 :edit-render{} template #default{ row } span v-ifrow.category ! 1{{ row.content }}/span /template template #edit{ row } vxe-input v-ifrow.category ! 1 v-modelrow.content typetext/vxe-input /template /vxe-column vxe-column fieldtype title类型 :edit-render{} template #default{ row } span v-ifrow.category ! 1{{ formatLabel(row.type, typeList) }}/span /template template #edit{ row } vxe-select v-ifrow.category ! 1 v-modelrow.type :optionstypeList transfer/vxe-select /template /vxe-column vxe-column fieldnote title说明 :edit-render{} template #default{ row } span v-ifrow.category ! 1{{ row.note }}/span /template template #edit{ row } vxe-input v-ifrow.category ! 1 v-modelrow.note typetext/vxe-input /template /vxe-column vxe-column title操作 width80 template #default{ row } vxe-button typetext statusdanger clickdeleteEvent(row)删除/vxe-button /template /vxe-column /vxe-table /div /template script setup import { ref } from vue const tableRef ref() const tableData ref([ { id: 10001, category: 1, description: 描述一, level: 1, remark: 备注一, status: 1, content: 内容一, type: 1, note: 说明一 }, { id: 10002, category: 2, description: 描述二, level: 2, remark: 备注二, status: 2, content: 内容二, type: 2, note: 说明二 }, { id: 10003, category: 3, description: 描述三, level: 3, remark: 备注三, status: 1, content: 内容三, type: 3, note: 说明三 }, { id: 10004, category: 1, description: 描述四, level: 1, remark: 备注四, status: 2, content: 内容四, type: 1, note: 说明四 } ]) const categoryList ref([ { label: 类别A, value: 1 }, { label: 类别B, value: 2 }, { label: 类别C, value: 3 }, { label: 类别D, value: 4 } ]) const levelList ref([ { label: , value: }, { label: , value: } ]) const allStatusList [ { label: 进行中, value: 1 }, { label: 已完成, value: 2 }, { label: 已暂停, value: 3 } ] const getStatusList (category) { if (category 2) { return allStatusList.filter(item [1, 2].includes(item.value)) } if (category 3) { return allStatusList.filter(item [2, 3].includes(item.value)) } return allStatusList } const typeList ref([ { label: 类型X, value: 1 }, { label: 类型Y, value: 2 }, { label: 类型Z, value: 3 } ]) const formatLabel (value, list) { const item list.find((item) item.value value) return item ? item.label : value } const insertEvent () { const $table tableRef.value if ($table) { $table.insert({ category: 1 }) } } const deleteEvent (row) { const $table tableRef.value if ($table) { $table.remove(row) } } const saveEvent () { const $table tableRef.value if ($table) { $table.validate(true).then(() { console.log(JSON.stringify(tableData.value, null, 2)) }).catch(errMap { console.log(校验不通过, errMap) }) } } const descriptionValidator ({ cellValue }) { if (cellValue || cellValue null || cellValue undefined) { return new Error(请输入数字) } if (isNaN(Number(cellValue))) { return new Error(只能输入数字) } if (Number(cellValue) 0) { return new Error(数字必须大于等于0) } } const noteValidator ({ row, cellValue }) { if (row.category 1) { return true } if (cellValue || cellValue null || cellValue undefined) { return new Error(请输入数字) } if (isNaN(Number(cellValue))) { return new Error(只能输入数字) } } const categoryChangeEvent (row) { row.status if (row.category 1) { console.log(选择了类别A) } else if (row.category 2) { console.log(选择了类别B) } else if (row.category 3) { console.log(选择了类别C) } else if (row.category 4) { console.log(选择了类别D) row.remark 类别四 } } const activeMethod ({ row, column }) { if (row.category 1) { const disabledFields [status, content, type, note] return !disabledFields.includes(column.field) } if (row.category 4 column.field remark) { return false } return true } /script
