elementui 中的树想要默认展开官方文档中有介绍:
1.默认展开失效问题
https://element.eleme.cn/#/zh-CN/component/tree
<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]
改成字符串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];
},