记录--极致舒适的Vue可编辑表格

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

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

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

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

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

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

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

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

放心食用：演示地址

准备数据

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的具名插槽