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更新。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。