(vue)iView 表格点击编辑按钮后编辑当前行

(vue)iView 点击编辑按钮后编辑当前行

点击前：

点击后：

第一部分：

      <Table
          ref="selection"
          :columns="columns"
          :data="tableData"
          @on-selection-change="handleSelectChange"
        > 
     </Table>

第二部分：

      //表格
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "标签",
          key: "label",
          align: "center",
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h(
                "Select",
                {
                  props: {
                    value: params.row.label,
                    transfer: true,
                  },
                  on: {
                    "on-change": (value) => {
                      params.row.label = value; 
                      // this.tableData[params.index].label = value;
                    },
                  },
                },
                this.labelList.map((item) => {
                  return h(
                    "Option",
                    {
                      props: {
                        value: item,
                      },
                    },
                    item
                  );
                })
              );
            } else {
              return h("div", params.row.label);
            }
          },
        },
        {
          title: "实体",
          key: "entity",
          align: "center", 
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h("input", {
                domProps: {
                  value: params.row.entity,
                },
                on: {
                  input: function (event) {
                    params.row.entity = event.target.value;
                  },
                },
              });
            } else {
              return h("div", params.row.entity);
            }
          },
        },
        {
          title: "关系",
          key: "relation",
          align: "center", 
          //...同上
        },
        {
          title: "描述",
          key: "desc",
          align: "center", 
          //...同上
        },
        {
          title: "操作",
          slot: "operation",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  "justify-content": "center",
                  "align-items": "center",
                },
              },
              [
                h(
                  "span",
                  {
                    props: {
                      type: "text",
                      size: "small",
                    },
                    style: {
                      color: "#fc3925",
                      margin: "0 10px",
                    },
                    on: {
                      click: () => {
                        if (params.row.$isEdit) {
                          this.saveRow(params.row);
                        } else {
                          this.editRow(params.row);
                        }
                      },
                    },
                  },
                  params.row.$isEdit ? "保存" : "编辑"
                ),
                h(
                  "span",
                  {
                    props: {
                      type: "text",
                      size: "small",
                    },
                    style: {
                      color: "#fc3925",
                      margin: "0 10px",
                    },
                    on: {
                      click: () => {
                        this.deleteRow(params.row);
                      },
                    },
                  },
                  "删除"
                ),
              ]
            );
          },
        },
      ],

第三部分：

    //编辑
    editRow(row, index) {
      this.$set(row, "$isEdit", true); 
    },
    //保存
    saveRow(row, index) {
      this.$set(row, "$isEdit", false); 
    },

解决参考：
https://blog.csdn.net/shentibeitaokong/article/details/82464488?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-82464488-blog-86480028.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-82464488-blog-86480028.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=1

https://blog.csdn.net/flydesigner/article/details/86480028?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-1-86480028-blog-88613290.pc_relevant_multi_platform_whitelistv1&spm=1001.2101.3001.4242.2&utm_relevant_index=4

https://blog.csdn.net/weixin_34418883/article/details/88613290?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-0-88613290-blog-123058591.pc_relevant_sortByStrongTime&spm=1001.2101.3001.4242.1&utm_relevant_index=3

https://blog.csdn.net/sxl97616/article/details/123058591