Table编辑删除保存

table编辑删除保存

<a-table :columns="columns" :data-source="dataSource" :pagination="false" :locale="{emptyText: '暂无数据,'}">
  <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>
    <a v-else @click="deleteTextInfo(record)">删除</a>
    <a-divider type="vertical" />
    <a @click="editTextInfo(record)">编辑</a>
  </span>
</a-table>

columns: [
    {
      title: "序号",
      dataIndex: "num",
      width: "15%",
      align: "center",
      customRender: (t, r, index) => {
        return parseInt(index) + 1;
      }
    },
    {
      title: "文本名称",
      dataIndex: "tagKey",
      key: "tagKey",
      align: "center",
      width: "35%",
      scopedSlots: { customRender: "tagKey" }
    },
    {
      title: "报告文本标签",
      dataIndex: "tagName",
      key: "tagName",
      align: "center",
      width: "35%",
      scopedSlots: { customRender: "tagName" }
    },
    {
      title: "操作",
      key: "action",
      align: "center",
      width: "15%",
      scopedSlots: { customRender: "action" }
    }
  ],
  dataSource: [
    {
      tagKey: "文本名称文本名称文本名称文本名称",
      tagName: "报告文本标签报告文本标签报告文本标签报告文本标签",
      edit: true
    },
    {
      tagKey: "文本名称文本名称文本名称文本名称",
      tagName: "报告文本标签报告文本标签报告文本标签报告文本标签",
      edit: false
    }
  ],

 modifyState() {
      this.dataSource.forEach(item => {
        item.edit = false;
      });
    },
    // 新增前校验是否存在edit为true的，如果存在则提示先保存修改的在新建 
    addTextInfo() {
      // 检查dataSource数组中是否有edit为true的项
      const hasUnsavedEdit = this.dataSource.some(item => item.edit === true);

      if (hasUnsavedEdit) {
        // 如果存在edit为true的项，提示用户先保存
        this.$message.error("存在未保存的编辑，请先保存再进行新建操作。");
      } else {
        // 如果不存在edit为true的项，执行新增逻辑
        const initInfo = {
          tagKey: "",
          tagName: "",
          edit: true
        };
        // 可选：调用modifyState方法（如果该方法存在）
        if (typeof this.modifyState === "function") {
          this.modifyState();
        }
        // 将新建的项添加到dataSource数组
        this.dataSource.push(initInfo);
      }
    },
    saveTextInfo(record) {
      console.log(record);

      // 需要保存的记录的 tagKey 和 tagName
      const { tagKey, tagName } = record;
      const index = this.dataSource.findIndex(item => item.tagKey === tagKey);
      // 创建一个新数组，不包括要删除的元素
      const newDataSource = this.dataSource.filter((item, currentIndex) => currentIndex !== index);
      // 检查是否有相同的 tagKey 或 tagName
      const existingRecord = newDataSource.find(item => item.tagKey === tagKey || item.tagName === tagName);
      if (existingRecord) {
        // 如果找到了相同的记录，则提示用户
        this.$message.error("已存在相同的文本名称或文本标签，请修改后再尝试保存");
      } else if (!record.tagKey || !record.tagName) {
        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);
      }
    },
    editTextInfo(record) {
      const tagKey = record.tagKey;
      const index = this.dataSource.findIndex(item => item.tagKey === tagKey);
      if (index !== -1) {
        // 找到了匹配的记录，现在设置 edit 为 true
        this.$set(this.dataSource[index], "edit", true);
      }
    },

提交的时候需要把dataSource中每条数组中的edit去掉

submitData() {
  // 创建一个不包含 edit 属性的新数组
  const dataForSubmission = this.dataSource.map(({ edit, ...item }) => item);

  // 现在 dataForSubmission 数组中的对象都不包含 edit 属性
  // 您可以使用 dataForSubmission 来进行数据提交
  // ...
}

submitForm(formName) {
  const param = {
    ...this.textForm,
    tags: this.dataSource.map(({ edit, ...item }) => item)
  };
  console.log(param, "aaaa");
  this.$refs[formName].validate(valid => {
    if (valid) {
      console.log("textForm", this.textForm);
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}