elementui树形组件自定义高亮颜色

1、需求描述:点击按钮切换树形的章节,同时高亮

2、代码实现

1)style样式添加

javascript 复制代码
<style>
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #81d3f8 !important;  //高亮颜色
  color:#fff;  // 字体颜色
}
</style>```

2)组件添加

```javascript
  <el-tree
          ref="treeRef"   
          :data="treeData"
          node-key="key"   //node-key必须要绑定唯一id,我这里的id是key所以使用key
          :highlight-current="true"  //设置高亮
          :default-expanded-keys="['0-1-0']"  // 默认展开
          @node-click="handleNodeClick"  // 节点点击事件
        ></el-tree> 

3)事件

javascript 复制代码
mounted(){
	this.$refs.treeRef.setCurrentKey(this.treeData[0].key);  //threeData是树形结构的数据
	//toNextClick是"下一步"按钮触发的事件
	this.$bus.$on("toNextClick", () => {
	this.getkey(this.treeData, this.componentsKey);  //this.componentsKey是当前的key
	//找到点击下一步之后的key值
      this.$refs.treeRef.setCurrentKey(this.keys); //添加高亮
    });
}

注:其他函数代码 (仅供自己参考,可忽略),大概的思路是通过当前的key判断,如果当前key是一级菜单,判断当前菜单下是否有二级菜单,如果有二级菜单直接高亮第一个二级菜单,如果没有,则找到下一个同级的一级菜单,判断是否有二级菜单,有则高亮。如果当前key是二级菜单,则判断上一级的菜单的二级菜单长度是否大于当前二级菜单的index,如果大于,key就是下一个index+1的位置,如果当前二级菜单的位置是一级菜单的最后一个元素,去找一级菜单的同级下一个一级菜单。

javascript 复制代码
// 寻找下一个key的位置
 getkey(obj, okey) {
      //找到okey在的位置
      let treeDataLen = this.treeData.length;
      let rootKey;
      let parentKey;
      let parentArrLen;
      let parentArr;
      let rootArr = this.treeData;
      if (!okey) {
        okey = "0-0";
      }
      let num = okey.match(/-/gim).length;  // key的格式是0-0(一级菜单) 0-0-1(二级) 0-0-0-1(三级菜单)
      if (num == 2) {
        //二级菜单
        rootKey = okey.slice(0, 3); 
        parentKey = rootKey;
      } else if (num == 3) {
        rootKey = okey.slice(0, 5);
        parentKey = okey.slice(0, 3);
      } else {
        //直接去下一个
        rootKey = okey;
        parentKey = rootKey;
      }
      let rootindex = rootArr.map(item => item.key).indexOf(rootKey);
      //找到okey的上一级的children长度
      let parentObj = this.treeData.find(item => {
        return item.key == parentKey;
      });
      if (parentObj.key == "0-0") {
        if (rootindex + 1 < treeDataLen && rootArr[rootindex + 1].children) {
          this.str = rootArr[rootindex + 1].children[0].key;
        }
        return;
      } else {
        parentArr = parentObj.children ? parentObj.children : [];
      }
      //找到okey的下标
      parentArrLen = parentArr.length;
      let keyindex = parentArr.map(item => item.key).indexOf(okey);
      //根元素的下标
      if (keyindex + 1 > parentArrLen - 1 && rootindex + 1 >= treeDataLen) {
        this.str = okey;
      } else if (
        keyindex + 1 > parentArrLen - 1 &&
        rootindex + 1 < treeDataLen
      ) {
        //子元素超出但是根还有
        if (rootArr[rootindex + 1].children) {
          this.str = rootArr[rootindex + 1].children[0].key;
        }
      } else {
        this.str = parentArr[keyindex + 1].key;
      }
    }
  }

tree格式 (以上getkey函数可以优化,通过层级index和parentIdx来判断,由于本人较懒,暂时先这样吧)

javascript 复制代码
export const TreeData =
  [
    {
      index: 1,
      label: "使用说明",
      key: "0-0",   //如果这里定义的是id:"0-0",那么node-key="id"
      parentIdx: 0,
      children: []
    },
    {
      index: 2,
      parentIdx: 0,
      label: "第一部分 合同协议书",
      key: "0-1",  //一级菜单
      children: [{
        index: 1,
        parentIdx: 2,
        label: "1.工程简况",
        key: "0-1-0",  // 二级菜单
      },
      {
        index: 2,
        parentIdx: 2,
        label: "2.合同的文件组成及解释顺序",
        key: "0-1-1",
      }
      ]}
     }
     ...
]
      
  1. 切换右侧的内容使用动态组件
javascript 复制代码
<component :is="isComponents" :ref="isRef" :key="isRef"></component>

computed: {
    isComponents() {
    //根据key来匹配组件 例如组件名字chapter0_0 (key:0-0) ,chapter0_0_1 (0-0-1)
      let key = this.componentsKey
        ? this.componentsKey.replace(/-/g, "_")
        : "0_0";
      return `chapter${key}`;  //组件的名字 chapter0_0
    }
 }
相关推荐
菌菇汤5 分钟前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶13 分钟前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_4116719832 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客2 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim2 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck2 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端
滿2 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉3 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室4 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子5 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存