プロジェクトシーン：
elementUIの
説明：+をクリックして対応する次の行に空白行を追加し、-をクリックして現在の行を削除します。とても簡単そうに見えますが、実際の状況は逆で、私の技術力が限られているのかもしれません。主に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];
},