sub-component receives an option field. Option has an array whose attribute is column, and the array contains some objects that may have an dicData array. When the dicData is updated, the view update will not be triggered, and the data has indeed been updated. When I change some other data dependencies and trigger the view update, the view related to dicData will be updated. It seems that only one rendering is missing. The relevant code is as follows. Thank you for the answer!
< H2 > try this.$set, is the same result, should not be this problem, option.column is still a response object, option.column print as follows, you can see that all properties have getter,setter function < / H2 >
parent component
</el-button>
</span>
)
};
return (
<el-table data={this.data} {...{ props: this.option }}>
{this.option.column.map(item => {
console.log(item.dicData)
if (item.dicData instanceof Array && item.dicData.length > 0) {
return (
<el-table-column
{...{ props: item }}
scopedSlots={{
default: scope => {
if (item.multiple) {
let labels = ""
if (scope.row[item.prop] instanceof Array && scope.row[item.prop].length > 0) {
scope.row[item.prop].forEach((v, i) => {
const dic = item.dicData.find(e => e.value == v)
const line = (i == scope.row[item.prop].length - 1 ? "" : ",")
if (dic) labels += dic.label + line
})
}
return labels
} else {
const dic = item.dicData.find(e => e.value == scope.row[item.prop])
if (dic) return dic.label
}
}
}}
/>
);
} else {
return <el-table-column {...{ props: item }} />;
}
})}
<el-table-column label="" scopedSlots={scopedSlots} />
</el-table>
);
}
</script>