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.完整代碼請移步：github.com/easyWater/e…（若有幫助還請star，以此鼓勵）

主要仍是依據了數據驅動視圖，在每一個表格行數據中添加"edit"來標識當前行的編輯狀態。再加上render函數可渲染iview中的組件，大部分api也是可用的(v-model無效)，因此實現可編輯表格仍是ok的，這裏也算是做爲一個參考的例子。若有其餘方案或可改進之處還望指出。