iview的table单元格可编辑

实际工作中，有时table可以直接编辑，这样对于用户比较友好！

1.如何让单元格可编辑

{
  title: '备注',
  key: 'notes',
  align: 'center',
  render: (h, params) => {
    if (params.row.$isEdit5) {
      return h('textarea', {
        domProps: {
          value: params.row.notes
        },
        class: 'myrenderChange5',
        on: {
          input: function (event) {
            params.row.notes = event.target.value // 让input的值为当前表格内容
          },
          blur: (event) => {
            this.onblurs(params, 'notes', '$isEdit5', '.myrenderChange5') // 失去焦点时
          }
        }
      })
    } else {
      return h('div', {
        on: {
          click: () => {
            this.handleEdit(params.row, '$isEdit5', '.myrenderChange5')
          }
        }
      }, params.row.notes)
    }
  }
},

2.为了更方便用户体验，当单元格1焦点还未失去，点击单元格2要直接获取焦点，无需点击两次（第一次失去单元格1焦点，一次获取单元格2焦点）

methods: {
  handleEdit (row, isEdit, className) {
    this.$set(row, isEdit, true)
    this.$nextTick(() => { // 下一次渲染时，获取焦点
      setTimeout(() => { // 做一个延迟获取焦点
        document.querySelector(className).focus()
      }, 10)
    })
  },
  onblurs (row, key, isEdit, className) { // 失去焦点
    this.$set(this.module.table.data[row.index], key, document.querySelectorAll(className)[0]._value)
    this.$set(row.row, isEdit, false)
  }
}

需要好好锻炼表达能力了，总感觉要表达的和实际的出入很大