element ui 树控件默认选中 高亮显示
例如我要默认显示选中‘所有数据’這个项
首先,给树组件指定ref ,其次加 node-key=‘id’ (其中id 是循环树控件每个项的Id值),最后:highlight-current="true",注意先后顺序问题
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:highlight-current="true"
ref="tree"
node-key="id"
default-expand-all
@node-click="handleNodeClick"
class="elTreeStyleTwo"
/>
然后,在Created默认生命周期创建的方法里执行setCurrentKey(Id值),如下代码
this.$nextTick(() => {
// tree 元素的ref value 绑定的node-key
this.$refs.tree.setCurrentKey(101);
});
最后,就是找到你要显示项目对应的Id
/** 查询部门下拉树结构 */
getTreeSelect() {
this.deptOptions = [
{
id:1,
label:'发货单',
children:[{id:101,label:'所有单据'},{id:102,label:'正操作'},{id:103,label:'待提货'},{id:104,label:'已提货'}]
},
]
},
這样就Ok啦
吾日三省吾身,脚踏实地~