iview的Tree组件自定义图标的方法

本文链接：https://blog.youkuaiyun.com/k0933/article/details/134515091

本文介绍了在Vue的IvuerTree组件中如何使用render属性和data中的render函数来实现节点的自定义图标，并提到树的展开、收起图标需通过样式覆盖。

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

在这里插入图片描述

<style lang="scss">
.suc-tree {
  .ivu-icon {
    // 禁止旋转
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    // width: 20px;
    // height: 24px;
  }

  .ivu-icon.ivu-icon-ios-arrow-forward:before {
    content: '';
    background: url('./img/plus.png') no-repeat; // 收起
    background-size: cover;
    width: 20px;
    height: 20px;
    display: block;
  }

  .ivu-tree-arrow-open .ivu-icon-ios-arrow-forward:before {
    content: '';
    display: block;
    background: url('./img/reduce.png') no-repeat; // 展开
    background-size: cover;
    width: 20px;
    height: 20px;
  }

  .ivu-tree-arrow {
    width: 20px;
  }

  .ivu-tree-title:before {
    content: '';
    background: url('./img/xzqh.png') no-repeat; // 自定义图标
    background-size: cover;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    display: inline-block;
  }
}
</style>

方法二、使用render属性，常用于设置子节点的图标

 <Tree :data="treeData" :render="renderContent" @on-select-change="onSelectChange" />
   methods: {
    renderContent (h, { root, node, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', [
          h('i', {
          // 自定义图标样式，要使用样式穿透
            class: 'suc-icon',
            style: {
              marginRight: '8px'
            }
          }),
          h('span', data.title)
        ])
      ]);
    },
  }

方法三、data数据中使用render函数，常用于设置根节点的图标

  data () {
    return {
      treeData: [
        {
          title: 'parent 1',
          expand: true,
          render: (h, { root, node, data }) => {
            return h('span', {
              style: {
                display: 'inline-block',
                width: '100%'
              }
            }, [
              h('span', [
                h('Icon', {
                  // 自定义图标样式，要使用样式穿透
                  class: 'suc-icon',
                  style: {
                    marginRight: '8px'
                  }
                }),
                h('span', data.title)
              ])
            ]);
          },
          children: [
            {
              title: 'child 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1',
                  expand: true
                },
                {
                  title: 'leaf 1-1-2',
                  expand: true
                }
              ]
            },
            {
              title: 'child 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1',
                  expand: true
                },
                {
                  title: 'leaf 1-2-1',
                  expand: true
                }
              ]
            }
          ]
        }
      ],
    }
  },