vue + element tree 设置展开，折叠图标,设置节点前图标

最新推荐文章于 2025-01-15 23:15:00 发布

原创最新推荐文章于 2025-01-15 23:15:00 发布 · 置顶 · 1w 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何在Element UI中自定义树组件的图标和展开/折叠行为，包括使用SCSS设置不同状态下的图标样式，以及根据不同数据类型显示特定图标的方法。

效果图：

1. 设置展开，折叠图标

<style lang="scss">
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
  content: "\e723";
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
  content: "\e722";
}
</style>

设置不同图标的效果，可以在element-ui icon模块查看对应的content值

2. 设置节点前的图标

<el-tree
      :data="data"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      default-expand-all
      :expand-on-click-node="false"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <!--可以根据情况，以数据类型来显示不同的图标或图片-->
        <i v-if="data.type == 'catalog'" class="el-icon-folder" />
        <i v-if="data.type == 'menu'" class="el-icon-tickets" />
        <span>{{ node.label }}</span>
      </span>
</el-tree>

下面是完整代码：

<template>
  <div>
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      default-expand-all
      :expand-on-click-node="false"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <i v-if="data.type == 'catalog'" class="el-icon-folder" />
        <i v-if="data.type == 'menu'" class="el-icon-tickets" />
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        id: 1,
        label: '目录1',
        type: 'catalog',
        children: [{
          id: 2,
          type: 'menu',
          label: '菜单1'
        }, {
          id: 3,
          type: 'menu',
          label: '菜单2'
        }]
      }, {
        id: 4,
        type: 'catalog',
        label: '目录2',
        children: [{
          type: 'menu',
          id: 5,
          label: '菜单1'
        }, {
          id: 6,
          type: 'menu',
          label: '菜单2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }

}
</script>

<style lang="scss">
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
  content: "\e723";
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
  content: "\e722";
}
</style>