核心代码
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>