elementui的tree默认高亮显示无效的问题
必须要的属性：
1, 设置node-key 属性
2, 使用nextTick
3, 设置 highlight-current 属性
4, this.$refs.xxx.setCurrentKey(‘id名称’)
<template>
<div class="onlineText">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" default-expand-all
ref="treeList" node-key="id" highlight-current></el-tree>
</div>
</template>
<script>
export default {
name: "onlineText",
data(){
return{
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods:{
handleNodeClick(data) {
console.log(data);
}
},
mounted(){
this.$nextTick(()=>{
this.$refs.treeList.setCurrentKey('5')
})
}
};
</script>
<style lang="less">
.onlineText{
}
</style>
这种就是设置默认值，也就是说不管你选择了哪个，刷新以后还是默认值。如果你想刷新以后保持你上一个点击的，就需要用缓存
<template>
<div class="onlineText">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" default-expand-all
ref="treeList" node-key="id" highlight-current></el-tree>
</div>
</template>
<script>
export default {
name: "onlineText",
data(){
return{
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
defaultId:'5'
}
},
methods:{
handleNodeClick(data) {
console.log(data);
sessionStorage.setItem("defaultId",data.id)
}
},
mounted(){
this.$nextTick(()=>{
if(sessionStorage.getItem("defaultId")){
this.$refs.treeList.setCurrentKey(sessionStorage.getItem("defaultId"))
}else{
this.$refs.treeList.setCurrentKey(this.defaultId)
}
})
}
};
</script>
<style lang="less">
.onlineText{
}
</style>
