VUE~~~table编辑列功能

编辑列的功能

//列信息中配置：
scopedSlots: { customRender: 'editname' }
//
<template slot="editname" slot-scope="text, record">
  <editable-cell :col="'name'" :record="record" @change="handleEditname(record, 'name', $event)"/>
</template>
//模板&方法
const EditableCell = {
  props: {
    record: Object,
    col: String
  },
  data () {
    return {
      editable: false,
      inputtext: ""
    };
  },
  methods: {
    handleChange (e) {
      const value = e.target.value;
      this.record[this.col] = value
    },
    check () {
      this.editable = false;
      this.$emit('change', this.record[this.col]);
    },
    edit () {
      this.editable = true
      this.inputtext = this.record[this.col]
    },
    close () {
      this.editable = false
      this.record[this.col] = this.inputtext
    }
  },
  render () {
    if (this.editable) {
      return (
        <div class="editable-cell">
          <div class="editable-cell-input-wrapper">
            <a-input value={this.record[this.col]} {...{ on: { pressEnter: this.check, change: this.handleChange } }} />
            <a-icon type="check" class="editable-cell-icon-check" {...{ on: { click: this.check } }} />
            <a-icon type="close" style="margin-left:8px;" {...{ on: { click: this.close } }} />
          </div>
        </div>
      )
    } else {
      return (
        <div class="editable-cell">
          <div class="editable-cell-text-wrapper">
            {this.record[this.col] || ''}
            <a-icon type="edit" class="editable-cell-icon" {...{ on: { click: this.edit } }} />
          </div>
        </div>
      )
    }
  }
};
//方法
handleEditname (record, dataIndex, value) {}