Data:
{
key: 5,
prop: "colorBook",
label: "高模模型文件",
render: (scope) => {const { $index} = scope;
const thisProp = `3dModel_sil3dHighModel_${$index}`;
let ele = [];
if (!this.$data[thisProp]) {this.$data[thisProp] = [];}
console.log(this);
ele = (
<ElFormItem
prop={thisProp}
label-width={0}
style={{marginBottom: 0}}
>
<FilesUpload
prop={thisProp}
limit={3}
uploadFunction={this.uploadFunction}
removeFunction={this.removeFunction}
fileList={this.$data[thisProp]}
/>
</ElFormItem>
);
return ele;
},
},Methods:
async uploadFunction(file, prop) {
let type = "";
switch (true) {case /sil3dHighModel/.test(prop):
type = "3dHighModel";
break;
default:
break;
}
const formData = new FormData();
formData.append("file", file);
const res = await uploadPatternImage(formData, { type});
let result = false;
if (res.code === 200) {if (!this.$data[prop]) {this.$data[prop] = [];}
this.$data[prop].push({name: res.data, url: res.data});
console.log(this);
this.patternInfo[prop] = this.$data[prop];
result = true;
}
return result;
}, 如上的代码，第一段是监听在 data 中的一段渲染表格列的代码，而后因为表格有个用户点击自增行的性能，所以 fileList 的 key 可能有有数多个，名字也不能确定，须要通过逻辑去减少。
后面尝试了一种写法 this[prop], 发现尽管 this.[prop] 是有变动的，但并不能触发页面的 update。初步断定 this 外面属于 data 的字段是 VUE 深拷贝的正本，由 data 的变动在 proxy 的 set 外面驱动。
解决方案：
通过间接设置在 this.$data 外面，视乎绕过了 VUEdata() 的拷贝逻辑，尽管没有在 this 中监听，然而能从 this.$data 中取到，并且失常触发页面 update 更新。