vue3 element-plus el-tree自定义图标

最新推荐文章于 2025-10-27 09:59:37 发布

原创最新推荐文章于 2025-10-27 09:59:37 发布 · 6.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用Vue框架实现的自定义树形组件的设计与实现细节。该组件通过定义节点的样式、图标及交互方式来增强用户体验，并通过事件派发机制实现与父组件的数据交互。

树组件
在这里插入图片描述

<template>
    <div class="left-tree">
        <el-tree
            :data="treeData.data"
            node-key="id"
            :props="defaultProps"
            :default-expanded-keys="[0]"
            :default-checked-keys="[0]"
            @node-click="nodeclick"
        >
            <template #default="scope">
                <div class="custom-node">
                    <i
                        class="tree-icon"
                        :class="{
                            'el-icon-caret-right': !scope.node.expanded,
                            'el-icon-caret-bottom': scope.node.expanded,
                            'el-icon-wlj-yuandian': scope.data.is_leaf === 1
                        }"
                        :style="{ color: scope.data.is_leaf === 1 ? 'rgb(54,229,150)' : '#409eff' }"
                    />
                    <span>{{ scope.node.label }}</span>
                </div>
            </template>
        </el-tree>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { getDept } from "@/api/asset"
// 定义派发事件
const emit = defineEmits(['tree-node-click'])
const nodeclick = (data, node, component) => {
    // console.log('子组件category的节点被点击', data, node, component)
    // 向父组件发送事件；
    emit('tree-node-click', data, node, component)
}
let defaultProps = reactive({
    children: 'children',
    label: 'name',
})
let treeData: any = reactive({ data: [] })
async function getDeptTree() {
    const data: any = await getDept({ POST_TYPE: 1 })
    treeData.data = data.lists
    console.log(treeData)
}
onMounted(async () => {
    getDeptTree()
})
</script>
<style lang="scss" scoped>
//tree
.el-tree-node__content:hover {
    background-color: rgb(255, 207, 131);
}
.el-tree-node:focus > .el-tree-node__content {
    background-color: rgb(255, 207, 131);
}
.el-tree-node__label {
    font-size: 1.5vh;
}
.el-tree-node__expand-icon {
    color: transparent;
    cursor: default;
}

//tree
.left-tree {
    height: 73vh;
    overflow: auto;
}
/*修改滚动条样式*/
.left-tree::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /**/
}
.left-tree::-webkit-scrollbar-track {
    background: rgb(104, 108, 143);
    border-radius: 10px;
}
.left-tree::-webkit-scrollbar-thumb {
    background: rgb(54, 229, 150);
    border-radius: 10px;
}
// .left-tree::-webkit-scrollbar-thumb:hover{
//   background: #333;
// }
// .left-tree::-webkit-scrollbar-corner{
//   background: #179a16;
// }
.tree-icon {
    margin-right: 1vh;
    margin-left: -2vh;
}
.el-tree {
    background: none;
    color: #fff;
}
</style>

父组件

<dept-tree  @tree-node-click="treenodeclick"/>
const treenodeclick  = (data, node, component) => {
	  console.log(data);
}

vue3 element-plus el-tree自定义图标

2 条评论