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('');
}