Ant|ant design of vue 编辑表格实现方式 Vue|Design

【Ant|ant design of vue 编辑表格实现方式】通过 saved 控制状态，通过v-model进行双向绑定

添加

//用于生成唯一标识符 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(''); }