vue antd 动态table

效果图：

<template>

    <div>
        <a-button class="editable-add-btn" @click="handleAdd">
            Add
          </a-button> 
          <div>

            <a-table :columns="columns" :data-source="data" bordered :rowKey="(record,index)=>{return index}">
                <template
                  v-for="col in ['Key', 'value', 'desc']"
                  :slot="col"
                  slot-scope="text, record, index"
                  
                >
                  <div :key="col"  >
                    <a-input
                      v-if="canedit"
                      style="margin: -5px 0"
                      :value="text"
                      @change="e => handleChange(e.target.value, index, col,record)"
                    />
                    <template v-else>
                      {{ text }}
                    </template>
                  </div>
                </template>
                


                <template slot="operation" slot-scope="text, record, index">
                          <a-popconfirm
                          v-if="data.length"
                          title="Sure to delete?"
                          @confirm="() => onDelete(index,record)"
                      >
                          <a href="javascript:;">Delete</a>
                      </a-popconfirm>
          
                </template>
              </a-table>
          </div>
    </div>

  </template>
  <script>
  const columns = [
    {
      title: 'Key',
      dataIndex: 'Key',
       '25%',
      scopedSlots: { customRender: 'Key' },
    },
    {
      title: 'value',
      dataIndex: 'value',
       '25%',
      scopedSlots: { customRender: 'value' },
    },
    {
      title: 'desc',
      dataIndex: 'desc',
       '30%',
      scopedSlots: { customRender: 'desc' },
    },
    {
      title: 'operation',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' },
    },
  ];
  
  const data = [];
  for (let i = 0; i < 5; i++) {
    data.push({
      Key: `key ${i}`,
      value: i,
      desc: `London Park no. ${i}`,
    });
  }
  export default {
    data() {
      this.cacheData = data.map(item => ({ ...item }));
      return {

        canedit:true,
        data,
        columns,
        editingKey: '',
      };
    },
    methods: {
      handleChange(value, index, column,record) {
        console.log(value)
        record[column]=value
        let newitem= record
        console.log(newitem)
        this.data.splice(index, 1, newitem)
      },
      onDelete(index){
        this.data.splice(index,1)
      },
      handleAdd() {
      console.log(this.data.length)
      const newData = {
        Key: '22',
        value: 32,
        desc: `London, Park Lane no `,
      };
      this.data = [...this.data, newData];
   
        },
    },
  };
  </script>
  <style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
  .editable-add-btn {
  margin-bottom: 8px;
}
  </style>