elementui树形组件自定义高亮颜色-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementui树形组件自定义高亮颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、需求描述：点击按钮切换树形的章节，同时高亮
elementui树形组件自定义高亮颜色,elementui,vue.js,前端
2、代码实现
1）style样式添加

<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）事件

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的位置，如果当前二级菜单的位置是一级菜单的最后一个元素，去找一级菜单的同级下一个一级菜单。

// 寻找下一个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来判断，由于本人较懒，暂时先这样吧）文章来源地址https://www.toymoban.com/news/detail-847656.html


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",
      }
      ]}
     }
     ...
]

切换右侧的内容使用动态组件

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