VUE+ Element-plus , el-tree 修改默认左侧三角图标,并使没有子级的那一项不展示图标

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    :render-content="renderContent"
    accordion
  />
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: 'Parent 1',
          children: [
            {
              label: 'Child 1-1'
            },
            {
              label: 'Child 1-2'
            }
          ]
        },
        {
          label: 'Parent 2'
        },
        {
          label: 'Parent 3',
          children: [
            {
              label: 'Child 3-1'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    renderContent(h, { node, data }) {
      return (
        <span>
          {node.isLeaf ? (
            // No icon for leaf nodes
            <span>{data.label}</span>
          ) : (
            // Custom icon for nodes with children
            <i class="el-icon-arrow-right" style="margin-right: 8px;"></i>
          )}
          {data.label}
        </span>
      )
    }
  }
}
</script>

<style scoped>
/* Custom icon styling, if needed */
.el-icon-arrow-right {
  color: blue;
}
</style>
 

### 如何在Element UI `el-tree` 组件中隐藏展开收缩图标 为了实现在 `el-tree` 中显示节点前的默认箭头,可以通过设置属性来控制。具体来说,在定义 `el-tree` 的时候可以传递一个对象给 `render-content` 或者直接通过配置项中的 `props` 来指定是否展示节点图标。 如果希望完全移除这些图标仅仅是改变它们的状态,则可以在 CSS 层面上操作: #### 方法一:使用 `node-key` 当需要任何交互时,最简单的方式就是利用 `lazy` 和 `load` 函数配合自定义渲染函数来阻止图标的呈现[^1]。但是这种方法较为复杂,适合仅仅是为了隐藏图标的情况。 #### 方法二:CSS 覆盖样式 更推荐的做法是在项目的全局样式表里添加特定的选择器覆盖原有样式,从而达到隐藏目的。对于 Element Plus 版本之前的版本(即基于 Vue 2.x 构建的应用),可以直接编辑 `.el-tree-node__expand-icon` 类名下的规则: ```css /* 隐藏所有的 expand icon */ .el-tree-node__expand-icon { display: none; } ``` 上述代码会作用于整个应用内的所有 `el-tree` 实例上的扩展/折叠按钮。若只想影响某一部分,则需要更加精确地定位到目标区域调整相应的类名选择器[^2]。 #### 示例代码片段 下面给出一段简单的 HTML 结构以及对应的 SCSS/SASS/CSS 样式作为例说明如何仅针对某个具体的 tree 进行处理: ```html <template> <div class="custom-tree-container"> <!-- 假设这是你要定制样式的那个树 --> <el-tree :data="treeData"></el-tree> </div> </template> <style scoped lang="scss"> .custom-tree-container .el-tree-node__expand-icon.is-leaf, .custom-tree-container .el-tree-node__children>.el-tree-node>.el-tree-node__content>.el-tree-node__expand-icon{ display:none!important; /* 强制隐藏叶结点和父结点的icon */ } </style> ``` 这段代码将会使得在这个容器内部的所有 `el-tree` 再显示出其节点旁边的展开收起的小三角形。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值