核心代码
-
highlight-current 高亮选中节点
-
node-key="label" 指定以哪个属性为唯一识别的 key
-
:current-node-key="current" 自定义current变量,存储默认选中节点对应的key值
-
v-if="current" 因是动态绑定,最开始current为空,所以需在current有值后,才渲染 el-tree
完整演示代码
<template>
<el-tree
v-if="current"
node-key="label"
:current-node-key="current"
:default-expand-all="true"
:expand-on-click-node="false"
highlight-current
:data="data"
:props="defaultProps"
>
</el-tree>
</template>
<script>
export default {
mounted() {
this.current = '成都市'
},
data() {
return {
current: '',
defaultProps: {
children: 'children',
label: 'label'
},
data: [
{
label: '四川省',
children: [
{
label: '成都市',
children: [
{label: '武侯区'}
]
}
]
},
{
label: '湖北省',
children: [
{label: '武汉市'}
]
}
]
}
}
}
</script>