el-tree 動態指定預設選中節點
阿新 • • 發佈:2021-01-04
技術標籤:Element UI
核心程式碼
-
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>