项目场景：
elementUI
描述：点击+在对应的下一行增加一个空行，点击-删除当前行。看起来so eazy，实际情况相反，也可能是我的技术能力有限。主要遇到了2个问题
问题描述：
1.删除很简单实现了，增加的时候出现添加的数据更新，但是页面不更新的情况；
2.增加的时候增加的数据总是重复我点加号的下一行数据。
3.关于el-table不更新有的帖子说增加：key，实际没有作用，下边我将有问题的和解决后的代码提供给大家
原因分析：
1.页面不更新，el-table绑定的是数组，数组直接赋值不能被 Object.defineProperty 检测到,所以我们采用this.$set方法强制进行数据的更新操作
2.增加的数据总是跟+的下一行重复，说明可能是我们的循环写的不对
解决方案：
html没啥好说的
<el-table
:data="formdata.FAMILYJSON"
style="width: 100%"
align="center"
:key="Math.random()"
>
<el-table-column label="姓名">
<template slot-scope="scope"
><el-input
v-model="scope.row.NAME"
:maxlength="20"
:disabled="!editable"
></el-input
></template>
</el-table-column>
<el-table-column label="与本人关系">
<template slot-scope="scope"
><el-select
v-model="scope.row.RELATION"
filterable
:clearable="editable"
:disabled="!editable"
:readonly="!editable"
placeholder="请选择与本人关系"
>
<el-option
v-for="item in dicts.RELATIONTYPE"
:key="item.NODECODE"
:label="item.NODEDESC"
:value="item.NODECODE"
></el-option> </el-select
></template>
</el-table-column>
<el-table-column label="国籍">
<template slot-scope="scope"
><el-input
v-model="scope.row.COUNTRYCODE"
:maxlength="20"
:disabled="!editable"
></el-input
></template>
</el-table-column>
<el-table-column label="工作单位及职务">
<template slot-scope="scope"
><el-input
v-model="scope.row.WORK"
:maxlength="20"
:disabled="!editable"
></el-input
></template>
</el-table-column>
<el-table-column label="现居住地">
<template slot-scope="scope"
><el-input
v-model="scope.row.HOME"
:maxlength="20"
:disabled="!editable"
></el-input
></template>
</el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button
size="mini"
icon="el-icon-plus"
circle
@click="addFAMILYJSON(scope.$index)"
:disabled="!editable"
></el-button>
<el-button
size="mini"
icon="el-icon-minus"
circle
v-if="scope.$index != 0"
@click="removeFAMILYJSON(scope.$index)"
:disabled="!editable"
></el-button>
</template>
</el-table-column>
</el-table>
js代码注释掉的表示我的错误示范（^ v ^）
addFAMILYJSON(comeindex) {
console.log(comeindex);
//因为length的值为1的时候index为0
if (comeindex + 1 == this.formdata.FAMILYJSON.length) {
this.formdata.FAMILYJSON.push({
NAME: '',
RELATION: '',
COUNTRYCODE: '',
WORK: '',
HOME: '',
});
console.log(this.formdata.FAMILYJSON);
} else {
this.medioList = this.formdata.FAMILYJSON;
//这里不能用foreach，正常逻辑是将前边的值赋给后边，如果我们用foreach就把index的值赋给后边所有index+n了就会出现
// 原值
// FAMILYJSON: [
// { NAME: '1', RELATION: '1', COUNTRYCODE: '1', WORK: '1', HOME: '1' },
// { NAME: '2', RELATION: '2', COUNTRYCODE: '2', WORK: '2', HOME: '2' },
// { NAME: '3', RELATION: '3', COUNTRYCODE: '3', WORK: '3', HOME: '3' },
// ]
// 变成了
// FAMILYJSON: [
// { NAME: '1', RELATION: '1', COUNTRYCODE: '1', WORK: '1', HOME: '1' },
// { NAME: '', RELATION: '', COUNTRYCODE: '', WORK: '', HOME: ''},
// { NAME: '2', RELATION: '2', COUNTRYCODE: '2', WORK: '2', HOME: '2' },
// { NAME: '2', RELATION: '2', COUNTRYCODE: '2', WORK: '2', HOME: '2' },
// ]
// _.forEach(this.formdata.FAMILYJSON, (index, item) => {
// console.log(item, index);
// if (index == comeindex) {
// this.formdata.FAMILYJSON[index] = {
// NAME: '',
// RELATION: '',
// COUNTRYCODE: '',
// WORK: '',
// HOME: '',
// };
// } else if (index > comeindex) {
// this.formdata.FAMILYJSON[index + 1] = this.searchitem(index);
// }
// });
var length = this.formdata.FAMILYJSON.length;
for (var index = length - 1; index >= comeindex; index--) {
if (index == comeindex) {
//这里不能用这种方式进行赋值操作，这种操作会导致页面不更新数据要实用this.$set
// 调用方法：this.$set( target, key, value )
// target：要更改的数据源(可以是对象或者数组)
// key：要更改的具体数据
// value ：重新赋的值
// this.formdata.FAMILYJSON[index + 1] = {
// NAME: '',
// RELATION: '',
// COUNTRYCODE: '',
// WORK: '',
// HOME: '',
// };
this.$set(this.formdata.FAMILYJSON, index + 1, {
NAME: '',
RELATION: '',
COUNTRYCODE: '',
WORK: '',
HOME: '',
});
} else if (index > comeindex) {
this.$set(
this.formdata.FAMILYJSON,
index + 1,
this.searchitem(index)
);
// this.formdata.FAMILYJSON[index + 1] = this.searchitem(index);
}
}
console.log(this.formdata.FAMILYJSON);
}
},
removeFAMILYJSON(index) {
this.formdata.FAMILYJSON.splice(index, 1);
},
searchitem(index) {
console.log(this.medioList[index]);
return this.medioList[index];
},