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啦

posted @ 2020-11-20 11:50  慕雪琳鸢  阅读(2688)  评论(0)    收藏  举报