<template> <div> <a-table :pagination="false" :columns="columns" :dataSource="dataSource"> //循环展示数据或input输入框 <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>怎么实现编辑全部

要实现全部编辑，你可以考虑添加一个"编辑全部"按钮，当点击该按钮时，将所有行的数据都设置为可编辑状态。你可以按照以下步骤来实现：

1. 在 data 中新增一个名为`isEditingAll`的属性，用于记录是否处于编辑全部状态，默认值为`false`。
2. 在 template 中添加一个"编辑全部"按钮，并绑定点击事件`editAll`。
3. 在`editAll`方法中，遍历所有的行数据，将它们都设置为可编辑状态，同时将`isEditingAll`设为`true`。
4. 在模板中的每个输入框和操作按钮中都添加一个判断，如果`isEditingAll`为`true`，则显示输入框或操作按钮，否则显示文本。
5. 在保存和取消编辑的方法中，也要做出相应的修改：如果`isEditingAll`为`true`，则遍历所有的行数据进行保存或取消编辑，否则只保存或取消编辑当前行数据。

下面是修改后的代码示例：

<template>
  <div>
    <a-button type="primary" @click="editAll" v-if="!isEditingAll">编辑全部</a-button>
    <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][col] || isEditingAll" 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] || isEditingAll">
          <a-icon type="check" @click="save(record.key)" />
          <a-icon type="close" @click="cancel(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: {},
      isEditingAll: false, // 是否处于编辑全部状态
      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) {
      if (this.isEditingAll) {
        // 遍历所有行数据进行保存
        this.dataSource.forEach(item => {
          Object.assign(item, this.editableData[item.key]);
        });
        this.isEditingAll = false;
      } else {
        Object.assign(this.dataSource.filter(item => key === item.key)[0], this.editableData[key]);
        this.$set(this.editableData, key, null);
      }
    },
    cancel(key) {
      if (this.isEditingAll) {
        // 遍历所有行数据进行取消编辑
        this.dataSource.forEach(item => {
          this.$set(this.editableData, item.key, null);
        });
        this.isEditingAll = false;
      } else {
        this.$set(this.editableData, key, null);
      }
    },
    editAll() {
      this.dataSource.forEach(item => {
        this.$set(this.editableData, item.key, cloneDeep(item));
      });
      this.isEditingAll = true;
    }
  }
};
</script>