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

通过 saved 控制状态，通过v-model进行双向绑定

<a-table :columns="scoreSetupColumns"
         :pagination="false"
         :dataSource="scoreSetData"
         rowKey="id"
         size="small">
 <template slot="scaleItem"
            slot-scope="text, record,index">
    <a-input v-if="!record.saved"  
          :value="text"
             placeholder="配分项描述"
             v-model="scoreSetData[index].scaleItem" />
    <template v-else>{{ text }}template>
  template>
  <template slot="letter"
            slot-scope="text, record,index">
    <a-input v-if="!record.saved"
             v-model="scoreSetData[index].letter"
             placeholder="代表字母"
             maxlength="5" />
    <template v-else>{{ text }}template>
  template>
  
  <template slot="weight"
            slot-scope="text, record,index">
    <a-input-number v-if="!record.saved"
                    :min="1"
                    :max="100"
                    :precision="0"
                    :formatter="value => `${value}%`"
                    :parser="value => value.replace('%', '')"
                    v-model="scoreSetData[index].weight" />
    <template v-else>{{ `${text}%` }}template>
  template>
  <template slot="action"
            slot-scope="text, record,index">
    <a v-if="record.saved"
       @click="scoreSetData[index].saved = false">编辑a>
    <a v-else
       @click="saveScale(index)">保存a>
    <a-divider type="vertical" />
    <a-popconfirm title="是否删除该配分项?"
                  @confirm="scoreSetData.splice(index, 1)"
                  okText="是"
                  cancelText="否">   
          <a class="txt-danger"
         :disabled="scoreSetData.length===1">删除a>
    a-popconfirm>
  template>
a-table>  
<a-button type="dashed"
          style="width:100%;margin-top:12px"
          icon="plus"
          @click="addScale">添加a-button>                   

//用于生成唯一标识符
import uuid from '@/utils/uuid'


// 列表数据
data () {
    return {
	  scoreSetData: [
	    {
	      id: uuid(),
	      scaleItem: '', // 配分项
	      letter: '', // 字母
	      weight: 1, // 权重
	      saved: false // false表示编辑状态
	    }
	  ]
	}
},
// 保存配分比列项
saveScale (index) {
  if (!this.scoreSetData[index].scaleItem) {
    this.$message.warning('请输入配分项')
    return
  }
  let sum = 0
  this.scoreSetData.forEach(item => (sum += item.weight))
  console.log('权重总和', sum)
  if (sum <= 100) this.scoreSetData[index].saved = true
  else this.$message.error('总权重不能超过100%')
},
// 新增   配分比列项
addScale () {
   this.scoreSetData.push({
     id: uuid(),
     scaleItem: '',
     weight: 1,
     letter: '',
     saved: false
   })
 },

uuid.js文件

/* eslint-disable */
export default (len, radix) => {
  var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');

  var uuid = [],
    i;
  radix = radix || chars.length;
  if (len) {
    // Compact form
    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
  } else {
    // rfc4122, version 4 form
    var r;

    // rfc4122 requires these characters
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
    uuid[14] = '4';
    // Fill in random data.  At i==19 set the high bits of clock sequence as
    // per rfc4122, sec. 4.1.5
    for (i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | Math.random() * 16;
        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
      }
    }
  }
  return uuid.join('');
}