版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010295735/article/details/83150278
前端框架用到了iview,使用tree组件的时候,数据是动态绑定的,页面控件调用如下:
<Tree :data="taskTreeData"></Tree>
methods中初始化数据的方法如下:
initTree() {
let _this = this;
//调用后台查询树的信息,此处略过,后台查询的返回结果示例如下
var treeData = [
{
title: "模型任务",
children: [
{
title: "单次任务",
children: [
{
title: "单次任务-1"
}
]
},
{
title: "定时任务"
}
]
},
{
title: "同步数据任务",
children: [
{
title: "日任务"
}
]
},
{
title: "指标预警任务"
}
];
_this.taskTreeData = _this.treeAddRend(treeData);
}
methods中全部展开或全部合并的方法如下:
//展开或合并树,当flag为true时全部展开,flag为false时全部合并
exchangeTree(flag) {
this.taskTreeData = this.treeChangeExpand(this.taskTreeData, flag);
},
//递归给树设置expand
treeChangeExpand(treeData, flag) {
let _this = this;
for (var i = 0; treeData && i < treeData.length; i++) {
treeData[i].expand = flag;
if (treeData[i].children) {
treeData[i].children = _this.treeChangeExpand(treeData[i].children,flag);
}
}
return treeData;
}
测试发现并不生效。
对比发现,不调用上述自己写的treeChangeExpand方法设置expand,而是在初始化的时候就直接在treeData中写expand,如下:
则console.log(this.taskTreeData),结果有expand并且有expand的get和set方法,如下,
而调用上述treeChangeExpand方法添加expand以后,打印出来的结果中有expand但没有expand的get和set方法。如下:
参考了https://blog.csdn.net/preferG/article/details/78278032,发现原来vue直接在json数据中添加属性是不行的,无法生成get和set方法,而需要使用vue的set方法。
将上述的treeChangeExpand方法改为如下,问题解决:
treeChangeExpand(treeData, flag) {
let _this = this;
for (var i = 0; treeData && i < treeData.length; i++) {
this.$set(treeData[i],'expand',flag); //重要!用set方法
if (treeData[i].children) {
treeData[i].children = _this.treeChangeExpand(treeData[i].children,flag);
}
}
return treeData;
}