Vue可编辑表格的实现——多表格编辑

基于: Vue可编辑表格的实现——单元格编辑表格.
1.创建新的组件如下图，并在table.vue示例页引入

只编辑一个单元格，可以通过确定唯一的id值实现，
在edit-table-mul中
2.创建一个新的字段insideData

data () {
    return {
      insideData: [],
      insideColumns: [],
      // 使用表格的行号和key值即可以确定一个单元格
      edittingId: '',
      edittingContent: ''
    }
  }

3.在handleColumns方法中进行配置

handleColumns () {
    // 将insideData深拷贝一份
      this.insideData = clonedeep(this.value)
      const insideColumns = this.columns.map(item => {
        if (!item.render && item.editable) {
          item.render = (h, { row, index, column }) => {
            // 给每一行的数据对象添加一个新的字段,并判断有无当前行数据
            const keyArr = this.insideData[index] ? this.insideData[index].edittingKeyArr : []
            console.log(row, index, column)
            // 使用JSX写法，直接在括号在写标签 ，注意括号在包括的所有内容必须有有一个大标签包裹
            // 逻辑和变量都要用花括号包裹
            // 最外层需要设置一个根元素
            return (
              <div>
                { keyArr && keyArr.indexOf(column.key) > -1 ? <i-input value={row[column.key]} style="width: 50px;" on-input={this.handleInput}></i-input> : <span>{row[column.key]}</span>}
                <i-button on-click={this.handleClick.bind(this, { row, index, column })}>{ keyArr && keyArr.indexOf(column.key) > -1 ? '保存' : '编辑'}</i-button>
              </div>
            )
          }
          return item
        } else return item
      })
      this.insideColumns = insideColumns
    }

4.在handleClick中设置非编辑状态逻辑（编辑—>保存）

handleClick ({ row, index, column }) {
      console.log({ row, index, column })
      if () {
      } else {
        let rowObj = this.insideData[index]
        // 通过拆分操作符把当前dittingKeyArr, column.key放进数组中
        rowObj.edittingKeyArr = (rowObj.edittingKeyArr) ? [...rowObj.edittingKeyArr, column.key] : [column.key]
        // 触发视图更新，splice是替换数组的方法
        this.insideData.splice(index, 1, rowObj)
      }
    }

5.继续在handleClick中设置编辑状态变化

handleClick ({ row, index, column }) {
      // console.log({ row, index, column })
      // 如果有数组，直接取得索引号，没有设置为-1
      let keyIndex = this.insideData[index].edittingKeyArr ? this.insideData(index).edittingKeyArr.indexOf(column.key) : -1
      // 如果大于-1，则找到了单元格中的key,则代表现在是编辑状态
      if (keyIndex > -1) {
        let rowObj = this.insideData[index]
        // 删掉key,改变现在的状态值
        rowObj.edittingKeyArr.splice(keyIndex, 1)
        // 替换修改后的行对象
        this.insideData.splice(index, 1, rowObj)
        this.$emit('input', this.insideData)
        // 保存当前编辑元素的数据，导出,newValue用来告诉父组件更新后的值是什么
        this.$emit('on-edit', { row, index, column, newValue: this.insideData[index][column.key] })
        // 点击保存后应该将edittingId设为空字符串，按钮值变为编辑状态
        this.edittingId = ''
        this.edittingContent = ''
      } else {
        let rowObj = this.insideData[index]
        // 通过拆分操作符把当前dittingKeyArr, column.key放进数组中
        rowObj.edittingKeyArr = (rowObj.edittingKeyArr) ? [...rowObj.edittingKeyArr, column.key] : [column.key]
        // 触发视图更新，splice是替换数组的方法
        this.insideData.splice(index, 1, rowObj)
      }
    }

6.继续在handleColumns方法中进行配置，给handleInput绑定新的参数值

handleColumns () {
            return (
              <div>
                { keyArr && keyArr.indexOf(column.key) > -1 ? <i-input value={row[column.key]} style="width: 50px;" on-input={this.handleInput.bind(this, row, index, column)}></i-input> : <span>{row[column.key]}</span>}
                <i-button on-click={this.handleClick.bind(this, { row, index, column })}>{ keyArr && keyArr.indexOf(column.key) > -1 ? '保存' : '编辑'}</i-button>
              </div>
            )
          }
          return item
        } else return item
      })
      this.insideColumns = insideColumns
    }

7.配置handleInput方法

    handleInput (row, index, column, newValue) {
      this.insideData[index][column.key] = newValue
    }