element-plus的Tree 树形控件添加图标

最新推荐文章于 2025-02-11 10:37:14 发布

qq_70032585

最新推荐文章于 2025-02-11 10:37:14 发布

阅读量3.7k

点赞数 5

本文链接：https://blog.youkuaiyun.com/qq_70032585/article/details/133775753

版权

本文详细描述了一个使用Vue的ElementUI库中的el-tree组件，展示了如何通过HTML和JavaScript实现树形结构的渲染，包括节点的图标选择和层级展示，以及点击事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

html代码

<el-tree :data="data" @node-click="handleNodeClick" node-key="id">

<img src="../assets/img/4.png" v-show="!node.isCurrent && !node.childNodes.length && node.level !== 1"

class="icon" />

<img src="../assets/img/3.png" v-show="node.isCurrent && !node.childNodes.length && node.level !== 1"

class="icon" />

<span @click="getNode(node)"

:class="[node.childNodes.length ? 'bold' : '', node.isCurrent ? 'orange' : '']">{{

node.label }}</span>

</span>

</template>

</el-tree>

js部分，这里没有强制使用ts做数据类型的控制

// 树形结构

// 点击树形结构

const handleNodeClick = (data) => {

console.log('选中', data);

}

// 这个打印出来的是node

const getNode = (node) => {

console.log(node)

}

const data = [

{

id: 1,

label: "教学楼",

a: 10,

num: 10,

children: [

{

id: 4,

label: "一楼",

a: 10,

num: 10,

children: [

{

id: 10,

label: "101",

{

id: 11,

label: "102",

{

id: 4,

label: "二楼",

a: 10,

num: 10,

{

id: 2,

label: "宿舍楼",

a: 0,

num: 1,

children: [

{ id: 5, label: "一楼", a: 1 },

{ id: 6, label: "二楼", a: 1 },

{ id: 7, label: "三楼", a: 1 },

]

const defaultProps = {

children: 'children',

label: 'label',

}

css

.cont {

position: fixed;

width: 20%;

height: 90vh;

background: #fff;

}

.head {

position: fixed;

width: 20%;

}

.demo-tabs {

height: 100px;

}

.input-with-select .el-input-group__prepend {

background-color: var(--el-fill-color-blank);

}

:deep(.el-tabs__nav) {

left: 20px;

}

:deep(.el-input-group) {

width: 97%;

position: absolute;

top: 55px;

left: 5px;

}

.el-input-group__append button.el-button,

.el-input-group__append button.el-button:hover,

.el-input-group__append div.el-select .el-input__wrapper,

.el-input-group__append div.el-select:hover .el-input__wrapper,

.el-input-group__prepend button.el-button,

.el-input-group__prepend button.el-button:hover,

.el-input-group__prepend div.el-select .el-input__wrapper,

.el-input-group__prepend div.el-select:hover .el-input__wrapper {

background-color: #5ea4eb;

color: black;

}

.tree {

height: 720px;

margin-top: 100px;

overflow: auto;

}

:deep(.el-tree-node__content) {

position: relative;

height: 35px;

}

.icon {

width: 12px;

margin-right: 6px;

}

.treeSom {

color: rgb(131, 231, 131);

font-size: 12px;

position: absolute;

top: 12px;

left: 320px;

}

.tree::-webkit-scrollbar {

width: 2px;

background-color: #f5f5f5;

}

.tree::-webkit-scrollbar-thumb {

background-color: #292626;

}