el-tree不显示勾选框时让第一项默认高亮 el-tree使用模板的写法

效果展示


组件的引用方式

高亮显示的属性：highlight-current

在获取tree要渲染的数据时，给要默认高亮的节点添加属性selected = true

我是要让第一个子节点默认高亮

动态添加样式的判断条件

const isSelected = node => {
    // 判断节点是否被选中
  return node.data.selected === true;
};

在节点的点击事件中 要先清除所有节点的selected为false 然后再设置当前点击节点的selected 为true

   const treeClick = e => {
    treeData.value.map(v => {
        v.selected = false;
        if (v.children && v.children.length > 0) {
            v.children.map(i => {
                if (i.id !== e.id) {
                    i.selected = false;
                }
            });
        }
    });
    if (e.isFirst) {
        // 点击一级目录 项目
        // params.projectId = e[0].id;
    } else {
        tableLoading.value = true;
        // 点击二级目录 项目下的应用
        getAbilityListParams.frontSubAppId = e.id;
        getTableData();
    }

最后在style中添加类名

.highlighted {
color: #57a3f3; /* 设置高亮节点的样式 */
}

     .tree-node {
        white-space: nowrap; /* 防止文字换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号(...) */
    }
    .tree-node:hover {
        overflow: visible; /* 鼠标悬停时显示全部文字 */
        text-overflow: unset;
    }
     .highlighted {
        color: #57a3f3; /* 设置高亮节点的样式 */
    }
    //改变element默认样式
      .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    color: #57a3f3;
    background: none;
}