表格按行编辑input_vue2.x+iview实现可编辑表格

1.首先看下效果图：

2.关键代码：

tbColumns: [ //主要是render不同
        {
          title: "姓名",
          key: "name",
          render: (h, params) => {
            if (params.row.edit) {
              return h("Input", {
                  props: {
                      value: params.row.name,
                  },
                  attrs: {
                      id: `name_${params.index}`
                  },
                  on: {
                      "on-blur": () => {
                        this.tbDataCopy[params.index].name = document.querySelector(`#name_${params.index} input`).value;
                      }
                  }
              });
            } else {
                return h("span", params.row.name);
            }  
          }
        },
        {
          title: "性别",
          key: "gender",
          render: (h, params) => {
            // 0：男, 1：女
            if(params.row.edit) {
              return h('RadioGroup', {
                props: {
                  value: params.row.gender
                },
                on: {
                  'on-change': (val) => {
                    this.tbDataCopy[params.index].gender = val
                  }
                }
              },[
                h('Radio', {
                  props: {
                    label: 0
                  }
                }, '男'),
                h('Radio', {
                  props: {
                    label: 1
                  }
                }, '女')
              ])
            }else {
              return h('span', {}, params.row.gender === 0 ? '男' : '女')
            }
          }
        },
        {
          title: "出生日期",
          key: "birthday",
          render: (h, params) => {
            if(params.row.edit) {
              return h('DatePicker', {
                props: {
                  type: 'date',
                  placeholder: '请选择出生日期',
                  options: this.dateOption,
                  value: params.row.birthday,
                  transfer: true
                },
                on: {
                  'on-change': (val) => {
                    this.tbDataCopy[params.index].birthday = val
                  }
                }
              })
            }else {
              return h('span', {}, params.row.birthday)
            }
          }
        },
        {
          title: "所在城市",
          key: "city",
          render: (h, params) => {
            if(params.row.edit) {
              let children = [] //模拟处理接口请求的数据
              this.cityList.forEach(city => {
                children.push(h('Option', {props: {value: city.value}}, city.label))
              })
              return h('Select', {
                props: {
                  value: params.row.city,
                  transfer: true
                },
                on: {
                  'on-change': (val) => {
                    this.tbDataCopy[params.index].city = val
                  }
                }
              }, children)
            }else {
              let cityName = ''
              this.cityList.forEach(city => {
                if(city.value === params.row.city) {
                  cityName = city.label
                }
              })
              return h('span', {}, cityName)
            }
          }
        },
        {
          title: "爱好",
          key: "hobby",
          render: (h, params) => {
            if(params.row.edit) {
              let children = [] //模拟处理接口请求的数据
              this.hobbyList.forEach(hobby => {
                children.push(h('Option', {props: {value: hobby.value}}, hobby.label))
              })
              return h('Select', {
                props: {
                  value: params.row.hobby,
                  transfer: true,
                  multiple: true
                },
                on: {
                  'on-change': (valList) => {
                    this.tbDataCopy[params.index].hobby = valList
                  }
                }
              }, children)
            }else {
              let hobbys = []
              params.row.hobby.forEach(item => {
                this.hobbyList.forEach(hobby => {
                  if(hobby.value === item) {
                    hobbys.push(hobby.label)
                  }
                })
              })              
              return h('span', {}, hobbys.join(','))
            }
          }
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            if (params.row.edit) {
              return h("div", [
                h(
                  "span",
                  {
                    style: {
                      cursor: "pointer",
                      color: "#81d740"
                    },
                    on: {
                      click: () => {
                        //保存数据
                        for (let key in this.tbDataCopy[params.index]) {
                            this.tbData[params.index][key] = this.tbDataCopy[params.index][key];
                        }
                        this.tbData[params.index].edit = false;
                      }
                    }
                  },
                  "保存"
                ),
                h(
                  "span",
                  {
                    style: {
                      cursor: "pointer",
                      color: "#4d85e8",
                      "margin-left": "20px"
                    },
                    on: {
                      click: () => {
                        this.tbData[params.index].edit = false;
                      }
                    }
                  },
                  "取消"
                )
              ]);
            } else {
              return h("div", [
                h(
                  "span",
                  {
                    style: {
                      cursor: "pointer",
                      color: "red"
                    },
                    on: {
                      click: () => {
                        this.tbData[params.index].edit = true;
                      }
                    }
                  },
                  "编辑"
                )
              ]);
            }
          }
        }
      ],

3.完整代码请移步：https://github.com/easyWater/editor_table（如有帮助还请star，以此鼓励）

主要还是依据了数据驱动视图，在每个表格行数据中添加"edit"来标识当前行的编辑状态。再加上render函数可渲染iview中的组件，大部分api也是可用的(v-model无效)，所以实现可编辑表格还是ok的，这里也算是作为一个参考的例子。如有其他方案或可改进之处还望指出。