场景如图,数据结构是树形,页面组件分别是用面板和tree实现,一级是面板,二级是树,所以在数据绑定的时候,有点麻烦.感谢产品(=^ ^=)
面板绑定数据比较好操作,正是因为这里,导致了tree的数据处理起来比较麻烦,话不多说,上解决代码
<el-collapse v-model="selectAn">
<template v-if="allGroupList && allGroupList.length > 0">
<el-collapse-item
v-for="(item, index) in allGroupList"
:key="index"
:name="index" <-- 别忘了设置这个name,不然你就知道严重,
用index赋值是为了方便取值 -->
>
<template slot="title">
<el-radio
v-model="searchForm.groupInfo[index]"
:label="item.cnId"
>
{{ item.name }}
</el-radio>
</template>
<el-tree
:ref="'eltree' + item.cnId" <-- 这里很关键,因为是循环的 -->
:data="item.children"
show-checkbox
node-key="cnId"
:props="defaultProps"
:check-on-click-node="true"
:default-checked-keys="selectTwo"
>
</el-tree>
</el-collapse-item>
</template>
</el-collapse>
上述的两个注意点,都是坑,我先踩为敬
js里的逻辑太多了,我就只贴关键处的代码,感兴趣的朋友可以私信我
selectTwo是tree的默认选中节点,是一个array
if (item2 == item1[j].cnId) {
var rf = 'eltree'+this.allGroupList[i].cnId;
//让json数组对象的内容与新数组的内容作比较,相同的话,改变标记为false
this.$refs[rf][0].setChecked(item2,false)
flag = false;
}
这里就知道ref如此的取值,长叹一口气.setChecked方法是官方提供,详情见文档.
setChecked这样才能有效的改变tree节点的选中状态,
通过改变selectTwo是没效果的,这个坑我也替各位踩了
补充一下,如果我这里只是单纯的tree组件,没有面板的话,处理起来是很简单的,
就用setChecked方法就能实现,
如果你们在实际场景中也是模板循环了多个tree,那么取值赋值用循环的方法即可
如果文章帮助到了您,麻烦您给文章点个赞,感谢了