element ui 樹控制元件預設選中 高亮顯示
阿新 • • 發佈:2020-11-20
例如我要預設顯示選中‘所有資料’這個項
首先,給樹元件指定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啦