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

刺骨的言语ヽ痛彻心扉 2022-01-14 10:47 1440阅读 0赞

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

**1.默认展开失效问题**

[https://element.eleme.cn/\#/zh-CN/component/tree][https_element.eleme.cn_zh-CN_component_tree]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70][]

<el-tree
      :data="data"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="[5]"
      :props="defaultProps">
    </el-tree>

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

![20190614115439521.png][]

改成字符串id就好了：

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

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

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

<el-tree :data="treeData" :props="defaultProps" 
    					@node-click="handleNodeClick"
    					:render-content="renderContent1"
    					node-key="offerSvcCode"
    					accordion
    					:default-expanded-keys="defaultExpandKeys"
    					highlight-current
    				></el-tree>

让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保存即可

<el-tree
    				:data="treeData"
    				node-key="offerSvcCode"
    				:render-content="renderContent"
    				:props="defaultProps"
    				@node-click="handleNodeClick2"
    				ref="tree"
    				accordion
    				:default-expanded-keys="defaultExpandKeys1"
    				highlight-current
    			>
    			</el-tree>

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

[https_element.eleme.cn_zh-CN_component_tree]: https://element.eleme.cn/#/zh-CN/component/tree
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70]: /images/20220114/cb153306f7ca479990ec9ddf21b60b78.png
[20190614115439521.png]: /images/20220114/217b3845f7b243e49c4dd1617ee9a472.png