实现在columns中的简称中三个值进行编辑和新增

这段代码是一个基于 ant-design-vue 组件库的表格编辑组件，通过循环展示数据或 input 输入框来实现对表格中的数据进行编辑和新增。其中，使用了 scopedSlots 来自定义表格列的渲染方式，操作列中的四个图标分别对应删除、编辑、保存和新增操作。同时，利用了 editableData 数组来记录正在编辑的数据，以便在保存时进行更新。具体实现过程可以参考代码中的注释。

为了实现在 columns 中的简称中三个值进行编辑和新增，我们需要对代码进行一些修改。具体来说，我们需要在 columns 中添加三个名为 "abbreviation", "fullName" 和 "nodes" 的列，用于展示和编辑表格数据中的简称、全称和来源三个值。同时，我们需要在模板中为这三个列添加对应的 slot，并利用 v-for 进行循环渲染。在 slot 中，我们使用 v-if 判断当前数据是否在编辑状态，并根据情况渲染 input 输入框或普通文本。具体修改后的代码如下：

<template>
  <div>
    <a-table :pagination="false" :columns="columns" :dataSource="dataSource">
      <!-- 简称、全称、来源三列 -->
      <template v-for="col in ['abbreviation', 'fullName', 'nodes']" :slot="col" slot-scope="text, record, index">
        <div :key="col">
          <a-input v-if="editableData[record.key]" v-model="editableData[record.key][col]" />
          <template v-else>{{ text }}</template>
        </div>
      </template>
      <!-- 操作列 -->
      <template slot="operation" slot-scope="text, record, index">
        <span v-if="editableData[record.key]">
          <a-icon type="check" @click="save(record.key)" />
        </span>
        <span v-else>
          <a-icon type="delete" @click="deleteItem(record.key)" />
          <a-icon type="edit" @click="edit(record.key)" />
          <a-icon type="plus" v-if="index==dataSource.length-1" @click="addItem(record.key)" />
        </span>
      </template>
    </a-table>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";

export default {
  data() {
    return {
      editableData: [], // 正在编辑的数组
      columns: [
        { title: "简称", dataIndex: "abbreviation", scopedSlots: { customRender: "abbreviation" } },
        { title: "全称", dataIndex: "fullName", scopedSlots: { customRender: "fullName" } },
        { title: "来源", dataIndex: "nodes", scopedSlots: { customRender: "nodes" } },
        { title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" } }
      ],
      dataSource: [
        { key: 0, abbreviation: "简称1", fullName: "全称1", nodes: "来源1" },
        { key: 1, abbreviation: "简称2", fullName: "全称2", nodes: "来源2" },
        { key: 2, abbreviation: "简称3", fullName: "全称3", nodes: "来源3" },
        { key: 3, abbreviation: "简称14", fullName: "全称14", nodes: "来源14" }
      ]
    };
  },
  components: {},
  props: ["tableDatas"],
  watch: {},
  updated() {},
  created() {},
  methods: {
    addItem(key) {
      let item = { key: key + 1, abbreviation: "", fullName: "", nodes: "" };
      this.dataSource.splice(key + 1, 0, item);
      this.$set(this.editableData, key + 1, item);
    },
    deleteItem(key) {
      this.dataSource = this.dataSource.filter(item => item.key !== key);
    },
    edit(key) {
      let editItem = cloneDeep(this.dataSource.filter(item => key === item.key)[0]);
      this.$set(this.editableData, key, editItem);
    },
    save(key) {
      Object.assign(this.dataSource.filter(item => key === item.key)[0], this.editableData[key]);
      this.$set(this.editableData, key, null);
    }
  }
};
</script>