el-tree默认展开第二节点且第一节点默认高亮同时添加滚动条并设置样式

最新推荐文章于 2025-08-15 14:41:47 发布

原创最新推荐文章于 2025-08-15 14:41:47 发布 · 4k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

xiaoming_0208

关注

标签

#前端 #javascript #vue.js

分类前端开发

前端专栏收录该内容

33 篇文章

订阅专栏

文章展示了如何在Vue.js应用中使用el-tree组件，使它默认展开到第二级节点并高亮第一个节点。同时，文章还详细介绍了如何添加滚动条以及自定义滚动条的样式，包括设置宽度和颜色。通过data属性和事件监听处理默认状态和交互效果。

el-tree默认展开第二节点且第一节点默认高亮，同时添加滚动条并设置样式

1、默认展开二级

html部分

 <div class="left-top-tree">
          <el-tree
            class="side-btn"
            :highlight-current="true"  //高亮
            :data="areaOptions"      //获取树形数据
            :props="defaultProps" 
            :current-node-key="currentNodekey"  //默认选中节点树
            node-key="id"    //id值必写
            :default-expanded-keys="twoKeys"  //二级展开设置
            ref="treeRef"
            @node-click="handleNodeClick"
          ></el-tree>
  </div>

js部分

data() {
    return {
      
      // 区域树选项
      areaOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 二级展示节点
      twoKeys:[],
      //默认选中的节点树
      currentNodekey: "",
}

/** 查询区域下拉树结构  对接接口展示 */
    getTreeselect() {
      treeselect().then((response) => {
        console.log(response,"tree结构")
        this.areaOptions = response.data;

        // 默认展开二级菜单
        this.areaOptions.forEach(m=>{
          this.twoKeys.push(m.id)
        })

      //   默认第一节点高亮
        if (this.areaOptions.length > 0) {
          this.currentNodekey = this.areaOptions[0].id;
          this.$nextTick(() => {
            this.$refs.treeRef.setCurrentKey(this.currentNodekey);
          });
        }
      });
    },

3、滚动条设置

     // 树形背景设置
        ::v-deep .el-tree {
          margin-top: 20px;
          background-color: transparent;
          color: #fff;
          overflow: scroll;
          height: 550px;
        }
    
         ::v-deep .side-btn::-webkit-scrollbar {
           width: 8px; // 横向滚动条
           height:0px; // 纵向滚动条 必写
         }
         //滚动条样式
         ::v-deep .side-btn::-webkit-scrollbar-thumb {
           box-shadow:0 0 0px 2px  #606266 inset;
           border-radius: 3px;
         }