vxe-tree 自定义插槽模板的用法,自定义标题，自定义图标

仰望.

已于 2025-04-11 11:21:51 修改

阅读量777

点赞数 12

分类专栏： vxe-ui 文章标签： vue.js vxe-ui

于 2025-04-11 11:05:28 首次发布

本文链接：https://blog.youkuaiyun.com/abc26296/article/details/147139095

版权

vxe-ui 专栏收录该内容

60 篇文章

订阅专栏

vxe-tree 自定义插槽模板的用法,自定义标题，自定义图标

查看官网：https://vxeui.com/
gitbub：https://github.com/x-extends/vxe-pc-ui
gitee：https://gitee.com/x-extends/vxe-pc-ui

npm install vxe-pc-ui@4.5.20 vxe-table@4.13.1

// ...
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

createApp(App).use(VxeUIAll).use(VxeUITable).mount('#app')
// ...

自定义标题

在这里插入图片描述

<template>
  <div>
    <vxe-tree
      transform
      :data="treeList">
      <template #title="{ node }">
        <vxe-icon status="success" name="chart-bar-y"></vxe-icon>
        <span>{{ node.title }}</span>
        <vxe-icon status="error" name="warning-triangle"></vxe-icon>
      </template>
    </vxe-tree>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const treeList = ref([
  { title: '节点2', id: '2', parentId: null },
  { title: '节点3', id: '3', parentId: null },
  { title: '节点3-1', id: '31', parentId: '3' },
  { title: '节点3-2', id: '32', parentId: '3' },
  { title: '节点3-2-1', id: '321', parentId: '32' },
  { title: '节点3-2-2', id: '322', parentId: '32' },
  { title: '节点3-3', id: '33', parentId: '3' },
  { title: '节点3-3-1', id: '331', parentId: '33' },
  { title: '节点3-3-2', id: '332', parentId: '33' },
  { title: '节点3-3-3', id: '333', parentId: '33' },
  { title: '节点3-4', id: '34', parentId: '3' },
  { title: '节点4', id: '4', parentId: null },
  { title: '节点4-1', id: '41', parentId: '4' },
  { title: '节点4-1-1', id: '411', parentId: '42' },
  { title: '节点4-1-2', id: '412', parentId: '42' },
  { title: '节点4-2', id: '42', parentId: '4' },
  { title: '节点4-3', id: '43', parentId: '4' },
  { title: '节点4-3-1', id: '431', parentId: '43' },
  { title: '节点4-3-2', id: '432', parentId: '43' },
  { title: '节点5', id: '5', parentId: null }
])
</script>

自定义图标

在这里插入图片描述

<template>
  <div>
    <vxe-tree
      transform
      :data="treeList">
      <template #icon="{ isExpand }">
        <vxe-icon v-if="isExpand" status="success" name="square-minus"></vxe-icon>
        <vxe-icon v-else status="error" name="square-plus"></vxe-icon>
      </template>
    </vxe-tree>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const treeList = ref([
  { title: '节点2', id: '2', parentId: null },
  { title: '节点3', id: '3', parentId: null },
  { title: '节点3-1', id: '31', parentId: '3' },
  { title: '节点3-2', id: '32', parentId: '3' },
  { title: '节点3-2-1', id: '321', parentId: '32' },
  { title: '节点3-2-2', id: '322', parentId: '32' },
  { title: '节点3-3', id: '33', parentId: '3' },
  { title: '节点3-3-1', id: '331', parentId: '33' },
  { title: '节点3-3-2', id: '332', parentId: '33' },
  { title: '节点3-3-3', id: '333', parentId: '33' },
  { title: '节点3-4', id: '34', parentId: '3' },
  { title: '节点4', id: '4', parentId: null },
  { title: '节点4-1', id: '41', parentId: '4' },
  { title: '节点4-1-1', id: '411', parentId: '42' },
  { title: '节点4-1-2', id: '412', parentId: '42' },
  { title: '节点4-2', id: '42', parentId: '4' },
  { title: '节点4-3', id: '43', parentId: '4' },
  { title: '节点4-3-1', id: '431', parentId: '43' },
  { title: '节点4-3-2', id: '432', parentId: '43' },
  { title: '节点5', id: '5', parentId: null }
])
</script>

自定义右侧按钮

在这里插入图片描述

<template>
  <div>
    <vxe-tree
      transform
      :data="treeList">
      <template #extra>
        <vxe-link href="https://vxeui.com/" status="primary">查看</vxe-link>
        <vxe-button mode="text" status="error" icon="vxe-icon-delete-fill">删除</vxe-button>
      </template>
    </vxe-tree>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const treeList = ref([
  { title: '节点2', id: '2', parentId: null },
  { title: '节点3', id: '3', parentId: null },
  { title: '节点3-1', id: '31', parentId: '3' },
  { title: '节点3-2', id: '32', parentId: '3' },
  { title: '节点3-2-1', id: '321', parentId: '32' },
  { title: '节点3-2-2', id: '322', parentId: '32' },
  { title: '节点3-3', id: '33', parentId: '3' },
  { title: '节点3-3-1', id: '331', parentId: '33' },
  { title: '节点3-3-2', id: '332', parentId: '33' },
  { title: '节点3-3-3', id: '333', parentId: '33' },
  { title: '节点3-4', id: '34', parentId: '3' },
  { title: '节点4', id: '4', parentId: null },
  { title: '节点4-1', id: '41', parentId: '4' },
  { title: '节点4-1-1', id: '411', parentId: '42' },
  { title: '节点4-1-2', id: '412', parentId: '42' },
  { title: '节点4-2', id: '42', parentId: '4' },
  { title: '节点4-3', id: '43', parentId: '4' },
  { title: '节点4-3-1', id: '431', parentId: '43' },
  { title: '节点4-3-2', id: '432', parentId: '43' },
  { title: '节点5', id: '5', parentId: null }
])
</script>

https://gitee.com/x-extends/vxe-pc-ui