标签：index vue value record Key table antd data desc

效果图：

<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',
      width: '25%',
      scopedSlots: { customRender: 'Key' },
    },
    {
      title: 'value',
      dataIndex: 'value',
      width: '25%',
      scopedSlots: { customRender: 'value' },
    },
    {
      title: 'desc',
      dataIndex: 'desc',
      width: '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>
  

标签：index,vue,value,record,Key,table,antd,data,desc
来源： https://www.cnblogs.com/SunshineKimi/p/14745032.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。