table编辑删除保存(多个)

页面中多个table增删改

结构

<a-tab-pane key="3" tab="解析信息" force-render>
  <!-- 表格相关 -->
  <a-table :columns="tableColumns" :data-source="tableDataSource" :pagination="false" :locale="{emptyText: '暂无数据'}" :scroll="scroll">
    <span slot="tagKey" slot-scope="text, record">
      <span v-if="record.edit">
        <a-input v-model="record.tagKey" />
      </span>
      <span v-else>{{ text }}</span>
    </span>
    <span slot="tagName" slot-scope="text, record">
      <span v-if="record.edit">
        <a-input v-model="record.tagName" />
      </span>
      <span v-else>{{ text }}</span>
    </span>
    <span slot="action" slot-scope="text, record">
      <a v-if="record.edit" @click="saveTextInfo(record)">保存</a>
      <div v-else>
        <a @click="editTextInfo(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定删除吗?" @confirm="() => deleteTextInfo(record)">
          <a class="delete-btn">删除</a>
        </a-popconfirm>
      </div>
    </span>
  </a-table>
  <a-button icon="plus" class="add-btn" @click="addCalculateInfo('table')" />
  <!-- 图形相关 -->
  <a-table :columns="imageColumns" :data-source="imageDataSource" :pagination="false" :locale="{emptyText: '暂无数据'}" :scroll="scroll">
    <span slot="tagKey" slot-scope="text, record">
      <span v-if="record.edit">
        <a-input v-model="record.tagKey" />
      </span>
      <span v-else>{{ text }}</span>
    </span>
    <span slot="tagName" slot-scope="text, record">
      <span v-if="record.edit">
        <a-input v-model="record.tagName" />
      </span>
      <span v-else>{{ text }}</span>
    </span>
    <span slot="action" slot-scope="text, record">
      <a v-if="record.edit" @click="saveTextInfo(record)">保存</a>
      <div v-else>
        <a @click="editTextInfo(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定删除吗?" @confirm="() => deleteTextInfo(record)">
          <a class="delete-btn">删除</a>
        </a-popconfirm>
      </div>
    </span>
  </a-table>
  <a-button icon="plus" class="add-btn" @click="addCalculateInfo('image')" />
</a-tab-pane>

方法

methods: {
    // modifyState() {
    //   this.dataSource.forEach(item => {
    //     item.edit = false;
    //   });
    // },
    modifyState() {
      this.dataSource.forEach(item => {
        item.edit = false;
      });
      this.tableDataSource.forEach(item => {
        item.edit = false;
      });
      this.imageDataSource.forEach(item => {
        item.edit = false;
      });
    },
    // addCalculateInfo() {
    //   const hasUnsavedEdit = this.dataSource.some(item => item.edit === true);
    //   if (hasUnsavedEdit) {
    //     this.$message.error("存在未保存的编辑，请先保存再进行新建操作。");
    //   } else {
    //     const initInfo = {
    //       tagKey: "",
    //       tagName: "",
    //       edit: true
    //     };
    //     this.modifyState();
    //     this.dataSource.push(initInfo);
    //   }
    // },
    addCalculateInfo(type) {
      let dataSource;
      switch (type) {
        case "table":
          dataSource = this.tableDataSource;
          break;
        case "image":
          dataSource = this.imageDataSource;
          break;
        default:
          break;
      }

      const hasUnsavedEdit = dataSource.some(item => item.edit === true);
      if (hasUnsavedEdit) {
        this.$message.error("存在未保存的编辑，请先保存再进行新建操作。");
      } else {
        const initInfo = {
          tagKey: "",
          tagName: "",
          edit: true
        };
        this.modifyState();
        dataSource.push(initInfo);
      }
    },
    // saveTextInfo(record) {
    //   const { tagKey } = record;
    //   const index = this.dataSource.findIndex(item => item.tagKey === tagKey);
    //   const newDataSource = this.dataSource.filter((item, currentIndex) => currentIndex !== index);
    //   const existingRecord = newDataSource.find(item => item.tagKey === tagKey);

    //   if (existingRecord) {
    //     this.$message.error("已存在相同的文本名称或文本标签，请修改后再尝试保存");
    //   } else if (!record.tagKey) {
    //     this.$message.error("内容不能为空");
    //   } else {
    //     this.$message.success("保存成功");
    //     this.modifyState();
    //   }
    // },
    saveTextInfo(record) {
      const { tagKey } = record;
      let dataSource;

      if (this.tableDataSource.some(item => item.tagKey === tagKey)) {
        dataSource = this.tableDataSource;
      } else if (this.imageDataSource.some(item => item.tagKey === tagKey)) {
        dataSource = this.imageDataSource;
      } else {
        dataSource = this.dataSource;
      }

      const index = dataSource.findIndex(item => item.tagKey === tagKey);
      const newDataSource = dataSource.filter((item, currentIndex) => currentIndex !== index);
      const existingRecord = newDataSource.find(item => item.tagKey === tagKey);

      if (existingRecord) {
        this.$message.error("已存在相同的名称，请修改后再尝试保存");
      } else if (!record.tagKey) {
        this.$message.error("内容不能为空");
      } else {
        this.$message.success("保存成功");
        this.modifyState();
      }
    },
    // deleteTextInfo(record) {
    //   const tagKey = record.tagKey;
    //   const index = this.dataSource.findIndex(item => item.tagKey === tagKey);
    //   if (index !== -1) {
    //     this.dataSource.splice(index, 1);
    //   }
    // },
    deleteTextInfo(record) {
      const tagKey = record.tagKey;
      let dataSource;

      if (this.tableDataSource.some(item => item.tagKey === tagKey)) {
        dataSource = this.tableDataSource;
      } else if (this.imageDataSource.some(item => item.tagKey === tagKey)) {
        dataSource = this.imageDataSource;
      } else {
        dataSource = this.dataSource;
      }

      const index = dataSource.findIndex(item => item.tagKey === tagKey);
      if (index !== -1) {
        dataSource.splice(index, 1);
      }
    },
    // editTextInfo(record) {
    //   const tagKey = record.tagKey;
    //   const index = this.dataSource.findIndex(item => item.tagKey === tagKey);
    //   if (index !== -1) {
    //     this.$set(this.dataSource[index], "edit", true);
    //   }
    // },
    editTextInfo(record) {
      const tagKey = record.tagKey;
      let dataSource;

      if (this.tableDataSource.some(item => item.tagKey === tagKey)) {
        dataSource = this.tableDataSource;
      } else if (this.imageDataSource.some(item => item.tagKey === tagKey)) {
        dataSource = this.imageDataSource;
      } else {
        dataSource = this.dataSource;
      }

      const index = dataSource.findIndex(item => item.tagKey === tagKey);
      if (index !== -1) {
        this.$set(dataSource[index], "edit", true);
      }
    },
    addModalShow() {
      this.visible = true;
    },
    cancel() {
      this.visible = false;
    },
    submitForm(formName) {
      console.log("formName", formName);
      // const param = {
      //   ...this.textForm,
      //   ...this.initParams,
      //   taskType: "TEXT",
      //   tags: this.dataSource.map(({ edit, ...item }) => item)
      // };

      // this.$refs[formName].validate(valid => {
      //   if (valid) {
      //     addTask(param).then((res) => {
      //       this.$message.success("提交成功");
      //       this.resetForm(formName);
      //       this.$emit("addTextTaskSuccess");
      //     });
      //   } else {
      //     return false;
      //   }
      // });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};