ant design of vue 编辑表格实现方式

代码

<a-table :columns="itemsColumns"
             :pagination="false"
             :dataSource="items"
             rowKey="id"
             size="small">
      <template slot="x"
                slot-scope="text, record,index">
        <a-input-number v-if="!record.saved"
                        :min="0"
                        :max="1000"
                        :precision="2"
                        v-model="items[index].x" />
        <template v-else>{{ text }}</template>
      </template>
      <template slot="action"
                slot-scope="text, record,index">
        <a v-if="record.saved"
           @click="items[index].saved = false">编辑</a>
        <a v-else
           @click="saveItem(index)">保存</a>
        <a-divider type="vertical" />
        <a-popconfirm title="是否删除该条数据?"
                      @confirm="items.splice(index, 1)"
                      okText="是"
                      cancelText="否">
          <a class="txt-danger"
             :disabled="items.length===1">删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-button type="dashed"
              style="width:100%;margin-top:12px"
              icon="plus"
              @click="addItem">添加</a-button>

import uuid from '@/utils/uuid'
import { itemsColumns } from './modules'

data () {
  return {
     submitLoading: false,
     itemsColumns,
     items: [
       {
         id: uuid(),
         x: 50,
         saved: false
       }
     ]
   }
 },
methods: {
 saveItem (index) {
     // if (!this.items[index].x) {
     //   this.$message.warning('请输入X坐标值')
     //   return
     // }
     this.items[index].saved = true
   },
  addItem () {
    this.items.push({
      id: uuid(),
      x: 50,
      saved: false
    })
  },
}

注意

如果编辑表格的数据items有默认初始值（比如修改操作要把之前添加的数据记录回显），则需要给每条数据绑定saved属性，其值为false，即默认处于编辑状态。如果不添加saved属性，数据的编辑保存操作vue不做监听。