a-table 可编辑，多选等操作

如图为表格示例图

操作详解

1.

<a-spin :spinning="loading">
 <!-- 操作按钮 -->
    <div>
      <a-button type="primary" icon="plus" @click="handleClickAdd">新增</a-button>
      <span style="padding-left: 8px;"></span>
      <template v-if="selectedRowKeys.length>0">
          <a-popconfirm
            :title="`确定要删除这 ${1} 项吗?`"
            @confirm="handleConfirmDelete">
            <a-button type="primary" icon="minus">删除</a-button>
            <span class="gap"></span>
          </a-popconfirm>
        </template>
      </div>
    </a-col>
  </a-row>

  <!-- 表格展示  -->
  <a-table
    :columns="columns"
    :data-source="listData"
    :row-key="record => record.rowIndex"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: handleSelectionChange }">
   <!-- 左侧固定td展示方式   eg:1  1.1   1.1.1  数据变化时做出的处理 -->
    <span slot="rowIndex" slot-scope="text, record">
      <span style="min-width:100px;">{{ record.rowIndex }}</span>
    </span>
  
    <!-- 名称展示，没有填写   文字提示需要填写 -->
    <span slot="columnName" slot-scope="text, record">
      <a-tooltip>
        <template v-if="!record.columnName" #title>
          <span class="numeric-input-title">请输入名称</span>
        </template>
        <a-input placeholder="请输入名称" v-model="record.columnName"/>
      </a-tooltip>
    </span>

   <!-- 类型选择后需要在‘CHILD’的时候展示添加子集按钮  添加子集 -->   
    <span slot="columnType" slot-scope="text, record" style="display: flex;">
      <a-tooltip>
        <template v-if="!record.columnType" #title>
          <span class="numeric-input-title">请选择类型</span>
        </template>
        <a-select
          v-model="record.columnType"
          placeholder="请选择类型"
          dictCode="database_column_type"
          @input="changeColumnType(record)"
        />
      </a-tooltip>
      <span
        v-if="record.columnType === 'CHILD'"
        type="text"
        @click="handleChildrenClickAdd(record)"
      >添加子集</span>
    </span>
    

   <!-- number 类型添加，控制只能填正整数  min 最小值，max 最大值， step 每次加1-->   
    <span slot="length" slot-scope="text, record">
      <a-input-number
        v-model:value="record.length"
        :min="1"
        :max="9999999"
        :step="1"
        :formatter="(value) => `${value}`"
        :parser="(value) => value.replace('.', '')"
      />
    </span>

 <!-- 普通checkbox -->     
    <span slot="nullable" slot-scope="text, record">
      <a-checkbox v-model:checked="record.nullable"></a-checkbox>
    </span>
   
 <!-- 需要修改值的 checkbox  如果字符串别的字符  需要自行修改值的定义以及参数-->       
    <span slot="isRequired" slot-scope="text, record">
      <a-checkbox v-model:checked="record.isRequired"></a-checkbox>
    </span>
  </a-table>
</a-spin>

<script>
 export default {
    name: 'Table',
    props: {},
    data() {
      return {
        showClearSelectButton: '',
        selectedRowKeys: [], // 选中的行的 rowKey 数组
        deleteIds: [],
        // 表头
        columns: [
          {
            title: '#',
            align: "center",
            dataIndex: 'rowIndex',
            width: 120,
            scopedSlots: {customRender: 'rowIndex'},
          },
          {
            title: '名称',
            align: "center",
            dataIndex: 'columnName',
            scopedSlots: {customRender: 'columnName'},
          },
          {
            title: '类型',
            align: "center",
            dataIndex: 'columnType',
            scopedSlots: {customRender: 'columnType'},
          },
          {
            title: '长度',
            align: "center",
            dataIndex: 'length',
            scopedSlots: {customRender: 'length'},
          },
          {
            title: 'checkbox',
            align: "center",
            dataIndex: 'nullable',
            scopedSlots: {customRender: 'nullable'}
          },
          {
            title: '是否必填',
            align: "center",
            dataIndex: 'isRequired',
            scopedSlots: {customRender: 'isRequired'}
          }
        ],
      }
    },
    created() {},
    // 计算属性
    computed: {},
    // 侦听器
    watch: {
      // 监听表格数据list
      listData: {
        deep: true,
        handler(newData, oldData) {
          // 发生变化时，定义ID为1， 循环数据++
          let id = 1
          this.listData.forEach((item) => {
            item.rowIndex = id++; // 一级设置唯一ID
            if (item.children.length) {
              this.addIds(item.children, item.rowIndex); // 递归处理子节点
            }
          })
        }
      }
    },
    mounted() {},
    methods: {
     // 递归处理子节点ID
      addIds(data, itemRowIndex) {
        let ids = 1
        data.forEach((item) => {
          item.rowIndex = itemRowIndex + '.' +ids++; // 设置唯一ID
          if (item.children.length) {
            this.addIds(item.children, item.rowIndex); // 递归处理子节点
          }
        })
      },
    // 新增数据的初始化
      valueData() {
        const form = {}
        this.columns.map(item => {
          form[item.dataIndex] = ''
        })
        form.columnType = 'CHILD'
        form.children = []
        return form
      },
      // 添加一级数据
      handleClickAdd() {
        this.listData.push(this.valueData())
      },
      // 给数据添加子集
      handleChildrenClickAdd(record) {
        record.children.push(this.valueData())
      },
      // 选择字段类型时  清空 children
      changeColumnType(record) {
        if(record.columnType !== 'CHILD') {
          record.children = []
        }
      },
      // 删除操作
      handleConfirmDelete() {
        this.listDataFun(this.listData, this.selectedRowKeys)
        this.this.selectedRowKeys = []
      },
    // 递归删除数据的集合
      listDataFun(data, selectData) {
        selectData.forEach((s) => {
          data.forEach((i, index) => {
            if(i.rowIndex === s) {
              // 获取删除的id数据
              this.getDeleteIds([i])
              data.splice(index, 1);
            }
            if(i.rowIndex !== s) {
              if(i.children.length) {
                this.listDataFun(i.children, selectData); // 递归处理子节点
              }
            }
          })
        })
      },
      // 递归删除的数据集合 deleteIds
      getDeleteIds(data) {
        data.forEach((item) => {
          if(item.id) {
            this.deleteIds.push(item.id)
          }
          if(item.children.length) {
            this.getDeleteIds(item.children)
          }
        })
      },
      // 列表选中的数据
      handleSelectionChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys;
      },
  /** Sync 获取所有的数据，包括values、deleteIds */
      getAllSync() {
        const num = this.validateFun(this.listData)
        if(num > 0) {
          return false
        } else {
          let result = {}
          result.error = 0
          result.values = this.listData
          result.deleteIds = this.deleteIds
          // return result  或者成功的处理调用
        }
      },
      // 校验数据提示错误
      validateFun(valiDates) {
        const num = 0
        valiDates.forEach((item) => {
          if (!item.columnName || !item.columnType || !item.columnComments) {
            this.$message.warning('名称、类型、描述不能为空，请假查数据填写是否正确！')
            num = num ++
          } else {
            //校验名称不能有.
            if (item.columnName.match(/\./)) {
              this.$message.warning('字段名称不能出现.请检查！')
              num = num ++
            }
          }
          // 递归校验全部数据子节点
          if(item.children.length) {
            this.validateFun(item.children)
          }
        })
        return num
      }
    }
  }
</script>