基于vue3 实现可编辑单元格，自定义数据化结构（新增、删除、取消）

需求背景

因公司的发展需要，需要自已研发一套erp系统，供公司内部人员使用，在其中涉及到大量的可编辑表格，而Element的表格相对来说比较简单，有些复杂的功能不满足，因此自己基于Element-plus进行了二次封装，在这基础上添加所需要的功能，达到公司的需求。

在线demo展示 感兴趣的话可以直戳–》源码地址

使用技术

• element-plus 的 table
• vue3

使用方法

<edit-table
    :mode="radio"  // 代表方向 top bottom hide
    :columns="column" // 传入的表头
    :data="list" // 数据
    @add="add" // 新增加一行会触发
    ref="table" //重置方法 table.value.reset() 
    :editableKeys="editableKeys"  // 控制是否可编辑
    @onChange="onChange"  // 数据改变的时候
    @del="deleteAction" // 删除触发
/>

主要内容

• 可编辑单元格、支持输入框input、支持时间、支持下拉选择框
• 数据化结构，可以满足自定义下拉框，自定义数据结构格式
• 自定义显示单元格内容
• 保存、删除、编辑、取消
• 新增加一行 、提交数据

思路

• 用columns来代替 el-table-column 进行循环
• 给每个item 添加edit 代表是否需要编辑
• editableKeys 初始化传入keys 默认需要编辑的行
• 点击保存、取消来控制edit的展示

完整代码实现

<template>
  <div class="m-edit-table">
    <div style="margin-top: 15px;margin-bottom: 15px" v-if="mode!=='hide'&&mode!=='bottom'">
      <el-button style="width: 100%" @click="add">
        <el-icon style="margin-right: 4px"><plus /></el-icon> 添加一行数据</el-button>
    </div>
    <el-table :data="transData" style="width: 100%" row-key="id" border>
      <template v-for="item in columns" >
        <el-table-column v-if="item.type" :type="item.type"  :width="item.width" :align="item.align&#