Vue2. X +iview implements editable tables

1. First take a look at the effect picture:

2. Key codes

tbColumns: [ // The main difference is render
        {
          title: "Name".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": (a)= > {
                        this.tbDataCopy[params.index].name = document.querySelector(`#name_${params.index} input`).value; }}}); }else {
                return h("span", params.row.name); }}}, {title: "Gender".key: "gender".render: (h, params) = > {
            // 0: male, 1: female
            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}},'male'),
                h('Radio', {
                  props: {
                    label: 1}},'woman')])}else {
              return h('span', {}, params.row.gender === 0 ? 'male' : 'woman'}}}, {title: "Date of birth".key: "birthday".render: (h, params) = > {
            if(params.row.edit) {
              return h('DatePicker', {
                props: {
                  type: 'date'.placeholder: 'Please select date of birth'.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 = [] // Simulate processing the data requested by the interface
              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: "Hobby".key: "hobby".render: (h, params) = > {
            if(params.row.edit) {
              let children = [] // Simulate processing the data requested by the interface
              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: "Operation".align: "center".render: (h, params) = > {
            if (params.row.edit) {
              return h("div", [
                h(
                  "span",
                  {
                    style: {
                      cursor: "pointer".color: "#81d740"
                    },
                    on: {
                      click: (a)= > {
                        // Save data
                        for (let key in this.tbDataCopy[params.index]) {
                            this.tbData[params.index][key] = this.tbDataCopy[params.index][key];
                        }
                        this.tbData[params.index].edit = false; }}},"Save"
                ),
                h(
                  "span",
                  {
                    style: {
                      cursor: "pointer".color: "#4d85e8"."margin-left": "20px"
                    },
                    on: {
                      click: (a)= > {
                        this.tbData[params.index].edit = false; }}},"Cancel")]); }else {
              return h("div", [
                h(
                  "span",
                  {
                    style: {
                      cursor: "pointer".color: "red"
                    },
                    on: {
                      click: (a)= > {
                        this.tbData[params.index].edit = true; }}},"Edit")]); }}}].Copy the code

3. Complete code please go to: github.com/easyWater/e… (Please also call STAR if you are helpful, so as to encourage)

Again based on the data-driven view, “Edit” is added to each table row data to identify the editing status of the current row. Plus the render function renders the components in the iView and most of the API is available (the V-Model is not), so it’s ok to implement editable tables as a reference example. Please point out any other plans or improvements.