当deleteItem删除所有的addItem事件也没有了，怎么实现删除全部之后addItem事件还在<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>

当deleteItem删除所有的addItem事件后，可以在deleteItem方法中添加以下代码，重新定义dataSource数组中每个元素的key值，然后再将editableData数组中对应的元素删除即可：

deleteItem(key) {
  this.dataSource = this.dataSource.filter(item => item.key !== key);
  this.dataSource.forEach((item, index) => {
    item.key = index;
  });
  this.$delete(this.editableData, key);
},

这样就可以实现删除全部之后addItem事件还在的功能。

相关问题

<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 @click="Edats">编辑</div> </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', 实现一键保存

要实现一键保存，可以在页面中添加一个按钮，然后在点击该按钮时，遍历 `editableData` 数组，将数组中每个元素的修改后的值更新到 `dataSource` 数组中对应的元素上。

具体实现步骤如下：

1. 在页面中添加一个“保存”按钮，绑定点击事件 `handleSave`。

2. 在 `handleSave` 方法中，遍历 `editableData` 数组，将每个元素的修改后的值更新到 `dataSource` 数组中对应的元素上。

3. 更新 `dataSource` 数组后，清空 `editableData` 数组，使得页面上的所有输入框都变成文本展示。

下面是代码示例：

<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>
      <a-button type="primary" @click="handleSave">保存</a-button>
      <a-button type="default" @click="handleCancel">取消</a-button>
    </div>
  </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',
        },
      ],
    }
  },
  methods: {
    edit(key) {
      this.editableData[key] = cloneDeep(this.dataSource.find(item => item.key === key))
    },
    deleteItem(key) {
      this.dataSource = this.dataSource.filter(item => item.key !== key)
    },
    addItem(key) {
      const newKey = this.dataSource.reduce((max, item) => Math.max(item.key, max), -1) + 1
      this.dataSource.push({ key: newKey, abbreviation: '', fullName: '', nodes: '' })
      this.edit(newKey)
    },
    save(key) {
      const index = this.dataSource.findIndex(item => item.key === key)
      Object.assign(this.dataSource[index], this.editableData[key])
      delete this.editableData[key]
    },
    handleSave() {
      for (const key in this.editableData) {
        this.save(key)
      }
      this.editableData = []
    },
    handleCancel() {
      this.editableData = []
    },
  },
}
</script>

实现编辑全部在使用deleteItem删除全部时显示新增addItem按钮事件<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>

根据您提供的代码，我理解您的需求是在删除所有数据项时，在页面上显示一个新增按钮。为了实现这个功能，您可以在删除全部数据项时，手动向数据源中添加一个空数据项，并将其 key 属性值设置为当前数据源长度。另外，您需要在渲染数据项时，判断当前数据项是否为空数据项，以便在页面上显示新增按钮。

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

<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>
            {{ record.key === 'new' ? '' : 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="record.key === 'new'" @click="addItem()" />
        </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: "new", abbreviation: "", fullName: "", nodes: "" }
      ]
    };
  },
  components: {},
  props: ["tableDatas"],
  watch: {},
  updated() {},
  created() {},
  methods: {
    addItem() {
      let item = { key: this.dataSource.length, abbreviation: "", fullName: "", nodes: "" };
      this.dataSource.splice(this.dataSource.length - 1, 0, item);
      this.$set(this.editableData, item.key, 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>

希望这个答案能够帮助到您。