• 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>

    嗯,就酱~~

  • 相关阅读:
    共享库的使用(.so)文件
    C/C++ 的宏中#和##的作用和展开
    有趣的打字训练
    libtool 创建库的工具
    vcpkg-微软开发的VC++打包工具
    Q他中的乱码再理解
    关于头文件和源文件的分别
    std::set 中内部元素有序条件删除的理解
    python 的 字节码 导入使用
    Pychar-20170301快捷键
  • 原文地址:https://www.cnblogs.com/jin-zhe/p/10075081.html
Copyright © 2020-2023  润新知