vue+elementUI实现可编辑动态表格，带效果图
记录一些最近做项目遇到的一些坑，顺便分享出来实现的效果。
1、无法输入编辑
2、删除输入框报错
3、点击编辑，无法载入数据
4、删除表格内输入框时序号错乱，报错，无法输入…
…
下面是动态生成表格形式的表单，效果图
<!--修改弹出框-->
<el-dialog
:close-on-click-modal="false"
:visible.sync="dialogTableVisible"
:title="textMap[dialogStatus]"
@dragDialog="handleDrag"
>
<div
style="width:100%; height:1px; background:#eee; border:none; margin:0px auto; margin-top:-30px; margin-bottom:30px;"
></div>
<el-form
ref="dataForm"
:inline="true"
:rules="rules"
:model="query"
class="demo-form-inline"
label-width="120px"
style="margin:0 auto"
>
<div style="width:100%;border-bottom:1px solid rgb(182, 182, 182,0.3);padding-bottom:15px">
<div style="margin-bottom:10px;margin-right:10px;margin-top:-10px">基本信息</div>
<div style="margin:10px;margin-left:0px">
<span>年度 </span>
<el-date-picker v-model="timeYear" value-format="yyyy" type="year" placeholder="选择年度"></el-date-picker>
<span> 标题 </span>
<el-input style="width:200px" size="small" v-model="title "></el-input>
</div>
<div style="margin-top:20px">
<span>评议内容</span>
<span style="color:blue;margin-left:15px;cursor: pointer;" @click="addTable">新增+</span>
</div>
</div>
<div class="dialog" v-for="(item,index) in allNum" :key="index">
<div class="title">
<span>活动标题 </span>
<el-input style="width:150px" size="small" v-model="queryData[index]['itemName']"></el-input>
<span> 分值（分） </span>
<el-input style="width:100px" size="small" v-model="queryData[index]['score']"></el-input>
<span style="margin-left:100px;color:blue;cursor: pointer;" @click="deleTable(index)">删除</span>
</div>
<el-table
:data="tableNum['num'+index]"
size="mini"
row-key="id"
border
highlight-current-row
style="width: 100%"
:header-cell-style="{background:'#f1f1f1'}"
>
<el-table-column label="序号" width="50px" prop="id" fixed="left"></el-table-column>
<el-table-column label="细则" width="300">
<template slot-scope="scope">
<el-input
style="width:250px"
v-model="queryData[index].tbReviewDetails[scope.row.id-1].detailName"
></el-input>
</template>
</el-table-column>
<el-table-column label="分值" width="300">
<template slot-scope="scope">
<el-input
style="width:250px"
v-model="queryData[index].tbReviewDetails[scope.row.id-1].score"
></el-input>
</template>
</el-table-column>
<!--操作-->
<el-table-column label="操作" align="center" fixed="right">
<template slot-scope="{row}">
<span class="spanBtn" @click="editDelete(row.id,index)">删除</span>
</template>
</el-table-column>
</el-table>
<div class="add-table" @click="addInput(index)">添加</div>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogTableVisible = false">取消</el-button>
<el-button size="mini" v-if="dialogType==0" type="primary" @click="createData">确认</el-button>
<el-button size="mini" v-if="dialogType==1" type="primary" @click="editData">确认</el-button>
</div>
</el-dialog>
js：
```javascript
data(){
allNum: [1],
tableNum: {
num0: [{ id: 1 }]
},
timeYear: "",
title: "",
queryData: [
{
score: "",
itemName: "",
tbReviewDetails: [
{
score: "",
detailName: ""
}
]
}
],
},
methods: {
addTable() {
this.allNum.push(this.allNum.length);
var count = this.queryData.length;
this.$set(this.queryData, count, {
tbReviewDetails: [
{
score: "",
detailName: ""
}
],
score: "",
itemName: ""
});
this.tableNum["num" + count] = [
{
id: 1
}
];
},
deleTable(index) {
this.allNum.splice(index, 1);
var len = this.queryData.length;
var count = 0;
for (var i in this.tableNum) {
count++;
}
delete this.tableNum["num" + index];
for (var i = index; i < count; i++) {
this.tableNum["num" + i] = this.tableNum["num" + (i + 1)];
if (this.tableNum["num" + i] == undefined) {
delete this.tableNum["num" + i];
}
}
this.queryData.splice(index, 1);
},
addInput(index) {
var len = this.queryData[index].tbReviewDetails.length;
this.queryData[index].tbReviewDetails.push({
score: "",
detailName: ""
});
this.tableNum["num" + index].push({
id: this.tableNum["num" + index].length + 1
});
},
editDelete(ids, index) {
var data = this.tableNum["num" + index];
var count = data.length;
let j = "";
for (var i = 0,len=data.length;i < len; i++) {
if (data[i].id == ids) {
data.splice(i, 1);
j = i;
}
}
for (var i = j,leng=this.tableNum["num" + index].length; i < leng; i++) {
this.tableNum["num" + index][i].id--;
}
this.queryData[index].tbReviewDetails.splice(ids - 1, 1);
}
}
注意，如果是动态写入默认数据，比如是编辑，不能直接使用赋值方式，否则会保错，需要使用this.$set( target, key, value )，如果是添加（新增）的话就需要赋予第一个值
// 修改的编辑弹窗
handleUpdate(row) {
getReview(row.id).then(response => {
this.reviewDetail = response.data;
this.dialogStatus = "update";
this.dialogType = 1;
this.allNum=[]
this.queryData=[]
this.tableNum={}
this.title=response.data.title
this.timeYear=response.data.timeYear
for(var i=0;i<this.reviewDetail.reviewItemDtoList.length;i++){
this.allNum.push(i)
this.$set(this.queryData,i, this.reviewDetail.reviewItemDtoList[i]);
for(var j=0;j<this.reviewDetail.reviewItemDtoList[i].tbReviewDetails.length;j++){
this.$set(this.tableNum,'num'+i,[{id:j+1}])
}
}
this.dialogTableVisible = true;
this.$nextTick(() => {
this.$refs["dataForm"].clearValidate();
});
});
},