1. 程式人生 > 實用技巧 >element ui 樹控制元件預設選中 高亮顯示

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啦