zoukankan      html  css  js  c++  java
  • el-tree 设置目录树中的某个节点为高亮状态

      现在可以实现,点击某个节点,该节点会红色高亮,那怎么让这个树加载出来的时候 默认某个节点高亮呢?element ui里面带勾选框的可以默认勾选上,这个没有勾选框

      其实很简单。element ui的树形控件支持setCurrentKey()方法,只需要将你要设置的节点的key值设置进去就可以了,前提是要设置好node-key属性。然后在created()或mounted()钩子里写上代码就可以了。

     

    <template>
      <section class="p-10">
        <el-tree :data="data" ref="vuetree" :props="defaultProps" @node-click="handleNodeClick"
                 highlight-current node-key="id" default-expand-all />
      </section>
    </template>
    <script>
      export default {
        data() {
          return {
            data: [{
              id: 1,
              label: '一级 1',
              children: [{
                id: 4,
                label: '二级 1-1',
                children: [{
                  id: 9,
                  label: '三级 1-1-1'
                }, {
                  id: 10,
                  label: '三级 1-1-2'
                }]
              }]
            }, {
              id: 2,
              label: '一级 2',
              children: [{
                id: 5,
                label: '二级 2-1'
              }, {
                id: 6,
                label: '二级 2-2'
              }]
            }, {
              id: 3,
              label: '一级 3',
              children: [{
                id: 7,
                label: '二级 3-1'
              }, {
                id: 8,
                label: '二级 3-2'
              }]
            }],
            defaultProps: {
              children: 'children',
              label: 'label'
            }
          };
        },
        methods: {
          handleNodeClick(data) {
            console.log(data);
          }
        },
        mounted() {
          this.$nextTick(function(){
            this.$refs['vuetree'].setCurrentKey(10);
          })
        }
      };
    </script>

    嗯,就酱~~

  • 相关阅读:
    FreeMarker list指令(3.2)
    FreeMarker if指令(3.1)
    FreeMarker FTL常用指令(3)
    FreeMarker模板文件的组成(2)
    FreeMarker语言概述(1)
    动态执行--获取某数据库某表某些字段的唯一值
    Luogu P3403 跳楼机|同余最短路
    Luogu P1640 [SCOI2010]连续攻击游戏|二分图
    **** **** 黑白球|DP
    **** **** 建筑物|DP
  • 原文地址:https://www.cnblogs.com/jin-zhe/p/10075081.html
Copyright © 2011-2022 走看看