vue可编辑表格框架

使用ElementPlus的Table啥都好，就是没有可编辑表格！！！

既然UI库不支持，那我们实现一个可编辑表格是很难的事么？难么？不难么？...

个人觉得如果是业务固定的可编辑表格，使用ElementPlus实现都不难。但是如果需要的是一个通用的可编辑表格，这好像还真说不好。

对于通用的可编辑表格，网上的实现方案也是五花八门，但是看下来多少都有些问题。个人认为一个通用的可编辑表格需要给使用方提供以下能力：

支持新增、删除、编辑、保存定义可编辑列定义表单组件，既可以是原生标签，也可以是自定义组件定义表单校验规则定义数据展示部分定义操作区域几乎无学习成本

实现了以上需求的可编表格，就可以满足基本的生产需求了。

在组件的基础上实现可编辑表格，保留的使用方式不变，还能提供可编辑功能。同时可编辑功能的配置与的使用风格一致，降低学习成本。

放心食用：演示地址

放心食用：Editable可编辑表格体验

准备数据const tableData = [{date: ‘2016-05-03‘,name: ‘Tom‘,address: ‘No. 189, Grove St, Los Angeles‘,},{date: ‘2016-05-02‘,name: ‘Tom‘,address: ‘No. 189, Grove St, Los Angeles‘,},{date: ‘2016-05-04‘,name: ‘Tom‘,address: ‘No. 189, Grove St, Los Angeles‘,},{date: ‘2016-05-01‘,name: ‘Tom‘,address: ‘No. 189, Grove St, Los Angeles‘,},]基础表格

基础表格的用法与几乎没有区别，唯一的不同就是中的data，在中被data-source替换。

无编辑效果 可修改表格

存在一个#default默认插槽和一个#edit具名插槽，默认插槽和具名插槽都提供了row、actions、$index等值。

可修改表格是在基础表格上给添加名为edit的具名插槽。

通过row可以获取到当前行的数据。插槽中的表单组件可通过v-model="row.*"对编辑值进行双向绑定。通过actions可以获取编辑表格的能力，通过action.startEditable($index)开启编辑，action.cancelEditable($index)取消编辑，action.saveEditable保存编辑。

可编辑效果操作保存取消删除效果

在上述表格的操作区域增加删除按钮，删除按钮点击时调用actions.ｄｅｌｅｔｅ($index)用来删除当前行。

删除效果操作删除保存取消删除新增效果

组件并不需要提供新增按钮，如果直接将新增按钮封装在组件内，那么这个组件就太呆了。因此只提供了actions.addRow方法，调用方可以根据自己的需求完成新增功能。

import { ref } from ‘vue‘;import EditTable from ‘@/components/EditTable.vue‘;import EditTableColumn from ‘@/components/EditTableColumn.vue‘;const tableData = [...];const addEditTableRef = ref();新增效果操作删除保存取消删除新增表单校验

组件允许验证用户的输入是否符合规范，来找到和纠正错误。只需要为的rules属性传入约定的验证规则，高级用法可参考async-validator。

总之校验规则和表单的校验规则一致。

表单校验效果操作删除保存取消删除新增获取编辑后的表单数据

组件对外暴露了resultData响应式对象，可以用来获取表格的最新数据。

获取编辑结果操作删除保存取消删除新增

获取数据:{{ formEditTableRef?.resultData }}

另一种数据配置

组件除了支持data-source的方式配置数据外，还支持request属性传入返回数据的函数。

import { ref } from ‘vue‘;import EditTable from ‘@/components/EditTable.vue‘;import EditTableColumn from ‘@/components/EditTableColumn.vue‘;const loadData = async () => [{date: ‘2016-05-03‘,name: ‘Tom‘,address: ‘No. 189, Grove St, Los Angeles‘,},{date: ‘2016-05-02‘,name: ‘Tom‘,address: ‘No. 189, Grove St, Los Angeles‘,},{date: ‘2016-05-04‘,name: ‘Tom‘,address: ‘No. 189, Grove St, Los Angeles‘,},{date: ‘2016-05-01‘,name: ‘Tom‘,address: ‘No. 189, Grove St, Los Angeles‘,},];另一种数据配置 EditTable 属性

属性名

说明

类型

可选值

默认值

data-source

显示的数据

array

—

—

request

动态数据，如果同时配置了data-source和request，则最终渲染为两个数据的和

function

—

—

EditTable 方法

方法名

说明

参数

editActions.addRow

增加一行可编辑态的行

row

editActions.deleteRow

删除指定行，不论该行是编辑态还是非编辑态都会被删除

$index

editActions.startEditable

指定行变为编辑态

$index

editActions.saveEditable

保存编辑态并触发表单校验，如果校验通过，编辑数据会被更新到表格中。

$index

editActions.cancelEditable

指定行取消编辑态

$index

原文链接：https://juejin.cn/post/7242140832379584567