ant design for vue table表格添加编辑单元格功能

EditableCell组件页面

<template>
  <div class="editable-cell">
    <div v-if="editable" class="editable-cell-input-wrapper">
      <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
        type="check"
        class="editable-cell-icon-check"
        @click="check"
      />
    </div>
    <div v-else class="editable-cell-text-wrapper">
      {{ value || ' ' }}
      <a-icon type="edit" class="editable-cell-icon" @click="edit" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'EditableCell',
  props: {
    text: [String, Number, null],
  },
  watch: {
    text(newV, oldV) {
      this.$set(this, 'value', newV)
    },
  },
  data() {
    return {
      value: this.text,
      editable: false,
    }
  },
  methods: {
    handleChange(e) {
      const value = e.target.value
      this.value = value
    },
    check() {
      this.editable = false
      this.$emit('change', this.value)
    },
    edit() {
      this.editable = true
    },
  },
}
</script>

table表格页面

<template>
    <a-table> // 一些属性table的操作和属性已忽略
        <template slot="aaaa" slot-scope="text,">
            <editable-cell :text="text" @change="onCellChange($event, record, 'materialDesc')"/>
        </template>
    </a-table>
</template>
<script>
import EditableCell from './components/EditableCell'
export default {
    components:{ EditableCell }
    methods:{
        onCellChange(value,record,dataIndex){
            console.log(value)
            console.log(record)
            console.log(dataIndex)
        }
    }
}
</script>