vue3+element-plus如何做一个动态增删同时具有校验功能的table表格

项目中有个比较麻烦的需求：

一个表格：

• 能手动向表格第一行增加一行

• 每一行的每一列在点击某一格时要能输入

• 每个表单控件需要有校验功能

• 支持多选

• 可以删除所选行

• 保存后需要前端做一个仅前端部分的查询

原型如下：

上面这些要求看起来就很麻烦。但是更麻烦的是，这个原型还是修改过的，原来的原型已经实现功能了，刚写完，第二天领导又把原型改掉了。

1.先说大致实现思路：

(1) 如何实现每个每个input输入框都带有校验功能？

答：每个输入框给一个<el-form>，就是每个表单都只有一个表单，每个表单的只有一个<el-form-item>，有着对应的校验规则。在点击保存时获取到当前所有的refs，通过调用form表单的validate()方法，实现每个表单都有校验功能。

(2) 如何向当前表格第一行加一个可编辑的行？

答：先定义一个字段模板，每次新增，用unshift方法添加到当前表格数据列表的第一行。

(3)如何实现点击某一格可以编辑？

答：每一个<td>格子里都有两个元素：一个是表单控件，一个是用来展示的文本。同时给每个表单绑定的字段在每一行的数据中加一个对应的'${key}_isEditing'字段，类型为Boolean，点击时修改这个字段为true或false，同时使用v-if控制当前td的表单控件的显示与隐藏。

主要比较难的就是上面三个功能的实现，其他的增删改都是围绕着<el-table>的当前选中行进行操作的。

具体组件源码如下：

<template>
  <div class="attr-table">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-date-picker style="width: 100%" @change="timeChange" v-model="timeRange" type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-col>
      <el-col :span="6">
        <el-input @clear="searchClearFn" clearable v-model="dataForm.attr" placeholder="属性编码" />
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="getData">查询</el-button>
      </el-col>
    </el-row>
    <br />
    <el-row :gutter="20">
      <el-col :span="24" style="text-align: right">
        <el-button @click="addAttr()" type="primary">新增</el-button>
        <el-button @click="save()