elementui tree树形控件 default-expanded-keys失效及动态绑定问题

elementui 中的树想要默认展开官方文档中有介绍:

1.默认展开失效问题

https://element.eleme.cn/#/zh-CN/component/tree

elementui tree树形控件 default-expanded-keys失效及动态绑定问题_第1张图片

 


也就是说要指定node-key为你数据中的唯一标识id,并且加入:default-checked-keys="[5]"属性,数组中的内容就是你指定的id的值,但我发现返回的id是字符串类型的,所以只写数字的话不生效  [1000,2000]

elementui tree树形控件 default-expanded-keys失效及动态绑定问题_第2张图片

改成字符串id就好了: 

:default-checked-keys="['1000','2000']"

2.动态绑定默认展开问题

我的树形是动态的,但我只想默认展开第一个,则只能动态绑定第一个的id了

让default-checked-keys为我data中设置的值

defaultExpandKeys: [],

在加载树形数据时将第一个id赋值给defaultExpandKeys

loadTreeData(){
		
				let self=this;
				this.axios.get('iop/newmarketingmanage/getMarketingOfferMapCodeTree')
				.then(function (response) {
					var data =eval('(' + response.data + ')')
					if(data.resultCode==0){
						self.treeData=data.resultData
						self.addDisabledLable(self.treeData)
						
						self.defaultExpandKeys=[data.resultData[0].offerSvcCode]
					}

				})
				.catch(function (error) {
				  //console.log(error)
				  self.$Message.error('请求失败')
				  self.isLoading = false
				})
			},

这样就可以每次默认展开第一个。

 

还有就是每次操作树数据更新问题,想要保持展开的父类状态:

这样加一个点击事件,每次把点击的id保存即可


			

 

handleNodeClick2(nodes,node,self){
				this.defaultExpandKeys1=[node.data.offerSvcCode];
			},

 

 

 

你可能感兴趣的:(前端)