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>
 

原文地址：https://blog.csdn.net/qing_lr/article/details/145282846

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！