iview表格自定义编辑当前行

该博客展示了如何使用Vue.js实现表格中的单元格编辑功能,包括代理人、开始时间和结束时间字段。用户可以点击编辑按钮激活编辑模式,通过Input和Select组件修改数据,并通过保存或取消操作确认或撤销更改。保存时,数据会通过POST请求更新到服务器。
摘要由CSDN通过智能技术生成
<Table :columns="columns1" :data="wtTableData"></Table>
data(){
 return {
     editIndex: -1,
    editName: "",
    editStartTime: "",
    editEndTime: "",
    columns1: [
        {
          title: "代理人",
          key: "TOUSERNAME",
          width: "200px",
          render: (h, { row, index }) => {
            let edit;
            if (this.editIndex === index) {
              this.editName = row.TOUSERNAME;
              let _this = this;
              edit = [
                // h("Input", {
                //   props: {
                //     value: row.TOUSERNAME
                //   },
                //   on: {
                //     input: val => {
                //       this.editName = val;
                //     }
                //   }
                // }),
                h(
                  "Select",
                  {
                    props: {
                      value: row.TOUSERNAME,
                      transfer: true
                    },
                    on: {
                      "on-change": val => {
                        this.editName = val;
                      }
                    }
                  },
                  _this.treeData.map(item => {
                    return h(
                      "Option",
                      {
                        props: {
                          value: item.userName
                        }
                      },
                      item.userName
                    );
                  })
                )
              ];
            } else {
              edit = row.TOUSERNAME;
            }
            return h("div", [edit]);
          }
        },
        {
          title: "开始时间",
          key: "STARTTIME",
          render: (h, { row, index }) => {
            let edit;
            if (this.editIndex === index) {
              this.editStartTime = row.STARTTIME;
              edit = [
                h("Input", {
                  props: {
                    value: row.STARTTIME
                  },
                  on: {
                    input: val => {
                      this.editStartTime = val;
                    }
                  }
                })
              ];
            } else {
              edit = row.STARTTIME;
            }
            return h("div", [edit]);
          }
        },
        {
          title: "结束时间",
          key: "ENDTIME",
          render: (h, { row, index }) => {
            let edit;
            if (this.editIndex === index) {
              this.editEndTime = row.ENDTIME;
              edit = [
                h("Input", {
                  props: {
                    value: row.ENDTIME
                  },
                  on: {
                    input: val => {
                      this.editEndTime = val;
                    }
                  }
                })
              ];
            } else {
              edit = row.ENDTIME;
            }
            return h("div", [edit]);
          }
        },
        {
          title: "操作",
          render: (h, { row, index }) => {
            if (this.editIndex === index) {
              return h(
                "div",
                {
                  style: {
                    display: "flex",
                    "justify-content": "space-around",
                    "align-items": "center"
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: { type: "success" },
                      style: {
                        width: "45%",
                        display: "flex",
                        "justify-content": "center",
                        "align-items": "center"
                      },
                      on: {
                        click: async () => {
                          // this.data[index].name = this.editName;
                          // this.data[index].email = this.editEmail;
                          // this.data[index].status = this.editStatus;
                          this.editIndex = -1;
                          let params = {
                            rolename: this.editName,
                            starttime: this.editStartTime,
                            endtime: this.editEndTime,
                            id: row.ID,
                            touserid: "d40ac7fe-9696-40b6-a302-01df4153ab47"
                          };
                          let res = await postConfig(params);
                          if (res.status == 200) {
                            this.$Message.success("保存成功");
                            this.reshData();
                          }
                        }
                      }
                    },
                    "保存"
                  ),
                  h(
                    "Button",
                    {
                      props: { type: "error" },
                      style: {
                        width: "45%",
                        display: "flex",
                        "justify-content": "center",
                        "align-items": "center"
                      },
                      on: {
                        click: async () => {
                          this.editIndex = -1;
                        }
                      }
                    },
                    "取消"
                  )
                ]
              );
            } else {
              return h(
                "div",
                {
                  style: {
                    display: "flex",
                    "justify-content": "space-around",
                    "align-items": "center"
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: { type: "primary" },
                      style: {
                        width: "45%",
                        display: "flex",
                        "justify-content": "center",
                        "align-items": "center"
                      },
                      on: {
                        click: () => {
                          this.editName = row.name;
                          this.editEmail = row.email;
                          this.editStatus = row.status;
                          this.editIndex = index;
                        }
                      }
                    },
                    "编辑"
                  ),
                  h(
                    "Button",
                    {
                      props: { type: "error" },
                      style: {
                        width: "45%",
                        display: "flex",
                        "justify-content": "center",
                        "align-items": "center"
                      },
                      on: {
                        click: async () => {
                          let res = await revoke();
                          if (res.status == 200) {
                            this.$Message.success("成功撤销授权");
                            this.reshData();
                          }
                        }
                      }
                    },
                    "撤销"
                  )
                ]
              );
            }
          }
        }
      ],
     }
 }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值