ant design vue怎么满足在在columns中的来源再加两个值可编辑可保存

Ant Design Vue 中的 Table 组件提供了一个 scopedSlots 属性，可以用来自定义表格的渲染方式。可以通过 scopedSlots 来实现在 Table 中的某一列加入可编辑的 input 组件，然后通过 methods 中的方法实现数据的编辑和保存。

具体实现如下：

1. 在 columns 中新增两列，设置 dataIndex 和 title 属性，例如：

columns: [
  {
    title: '简称',
    dataIndex: 'abbreviation',
  },
  {
    title: '全称',
    dataIndex: 'fullName',
  },
  {
    title: '来源',
    dataIndex: 'source',
    scopedSlots: { customRender: 'source' },
  },
  {
    title: '来源1',
    dataIndex: 'source1',
    scopedSlots: { customRender: 'source1' },
  },
  {
    title: '来源2',
    dataIndex: 'source2',
    scopedSlots: { customRender: 'source2' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
],

2. 在 template 中新增三个 slot，分别对应三列的渲染方式：

<template v-for="col in ['source', 'source1', 'source2']" :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>

3. 在 data 中新增一个名为 editableData 的数组，用于存储正在编辑的数据。

data() {
  return {
    dataSource: [...] // 表格数据
    editableData: [], // 正在编辑的数据
    ...
  }
}

4. 在 methods 中新增若干个方法，用于实现数据的编辑和保存。

methods: {
  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);
  },
},

5. 在 template 中对 source1 和 source2 列设置 edit 和 save 事件：

<template slot="source1" slot-scope="text, record, index">
  <div :key="col">
    <a-input v-if="editableData[record.key]" v-model="editableData[record.key][col]" @input="Changeasd(editableData)" />
    <template v-else>{{ text }}</template>
  </div>
</template>
<template slot="source2" slot-scope="text, record, index">
  <div :key="col">
    <a-input v-if="editableData[record.key]" v-model="editableData[record.key][col]" @input="Changeasd(editableData)" />
    <template v-else>{{ text }}</template>
  </div>
</template>

6. 在 template 中对操作列的 edit 和 save 事件调用对应的方法：

<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>

通过以上步骤，就可以在 Ant Design Vue 的 Table 组件中实现在来源列中再加两个值可编辑可保存的功能了。