ElementUIツリー選択ノードの背景色の変更、プロテストが可能

elementUIツリーのデフォルトの背景色はあまり明確ではありません。下の図に示すように、DOMツリーを見て、このプロパティを設定する場所を見つけて、独自の色に変更してください。

ツリーコンポーネントを自分で再パッケージ化し、さらにhighlight-current属性を再パッケージ化します

<template>
  <div style="margin-top:10%;min-height:calc(100% - 60px);;border: 1px solid #dccdcd;">
    <el-tree
      :data="opt.treeData"
      :node-key="opt.key"
      :props="opt.defaultProps"
      @node-click="handleNodeClick"
       ref="tree"
       :indent="indent"
       highlight-current
    ></el-tree>
  </div>
</template>
<script>

export default {
  props: {
    opt: {
      type: Object
    }
  },
  data() {
    return {
      indent:5,
    };
  },
  methods: {
    handleNodeClick(data, node, self) {
      let key = this.$refs.tree.getCurrentKey();
      let returnData ={'data':data,'key':key} 
     //获取数据id,后台通过ID获取类型与数据
 
     this.$emit('getNodeId',returnData);

    }
  }
};
</script>

//使用的地方  不要加scoped
.el-tree-node.is-current > .el-tree-node__content {

         background-color: #c2d6ea !important;

}