修改element-ui tree树结构前的图标，及树形结构的样式

最新推荐文章于 2024-08-14 17:37:56 发布

安康全是山

最新推荐文章于 2024-08-14 17:37:56 发布

阅读量4.3k

点赞数

分类专栏： element

本文链接：https://blog.csdn.net/k912120/article/details/109532186

版权

本文介绍如何根据项目需求修改Element-UI的Tree组件，包括改变树节点的图标以及调整树形结构的字体样式。通过示例代码展示了实现方法，达到自定义视觉效果。

摘要由CSDN通过智能技术生成

因项目需求，需修改tree树结构的图标，以及树形的字体样式等；

代码如下：

<template>
    <div class="FormMaintain">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
            <span class="custom-tree-node" :class="data.class" slot-scope="{ node, data }">
                <span>
                    <i :class="data.icon"></i>{
  { node.label }}
                </span>              
            </span>
        </el-tree>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [{
            label: '一级1',
            class:'secondOne',
            icon:'el-icon-star-on',
            children: [{
                label: '左岸1',
                class:'secondOne&#