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

yuye1997

已于 2023-08-07 14:55:57 修改

阅读量576

点赞数 1

文章标签： vue.js 前端 javascript elementui

于 2023-08-02 17:45:00 首次发布

本文链接：https://blog.csdn.net/yuye1997/article/details/132067961

版权

效果展示
在这里插入图片描述

组件的引用方式


            <el-tree
                :data="treeData"
                :highlight-current="true"
                node-key="id"
                default-expand-all
                :props="defaultTreeProps"
                @node-click="treeClick"
            >
                <template #default="{ node, data }">
                    <span class="tree-node" :class="{ highlighted: isSelected(node) }" :title="data.title">{{
                        data.title
                    }}</span>
                </template>
            </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;
}