关于antd Tree组件修改图标

vue+antd修改Tree组件图标

• 修改折叠/展开图标
• 显示图标-------自定义图标
• 标题上显示子节点数量

修改折叠/展开图标

<Tree
  show-icon
  show-line
  default-expand-all
  :load-data="onLoadData"
  :tree-data="treeData"
  @select="selectTree"
  style="height: 100%; overflow-y: scroll"
>
<!-- 通过expanded判断当前是展开/折叠状态 -->
  <template #switcherIcon="{ expanded }">
    <template v-if="!expanded"> <!-- 因为我设置了默认展开所有节点，所以反着判断 -->
      <PlusSquareOutlined />  <!-- 放折叠图标 -->
    </template>
    <template v-else>
      <MinusSquareOutlined /> <!-- 放展开图标 -->
    </template>
  </template>
 </Tree>

显示图标-------自定义图标

<template #icon="{ key, selected }">
  <template v-if="key === '0'">
    <img src="/src/assets/images/all.png" />  <!-- 这里可以放置图片/svg/icon -->
  </template>
  <template v-else>
    <AppstoreAddOutlined style="color: #5aa9ff; font-size: 18px; margin-right: 3px" />
  </template>
</template>

标题上显示子节点数量

Html部分：

<template #title="{ dataRef }" style="display: flex">
  <span>{{ dataRef.title + '(' + dataRef.num + ')' }}</span>
</template>

ts部分：

const treeData = ref<TreeDataItem[]>([
  {
    title: '全部',
    key: '0',
    class: 0,
    id: '',
    num: 0,
  },
]);

onMounted(() => {   //这里不想用钩子的话可以用:load-data="onLoadData"，因为我这全部下面就一层数据没必要用异步加载
   getRootTabData().then((res) => {
     treeData.value[0].num = res.response.length;    //放置全部节点下的子节点数量
     treeData.value[0].children = [];       //给全部添加子节点
     console.log(res);
     if (res.status == 'OK') {
       res.response.forEach((i) => {
         let params = {
           key: i.classId,
           title: i.className,
           label: i.className,
           value: i.classId,
           num: i.labelNum,      //用于显示子节点数量
         };
         treeData.value[0].children.push(params);
       });
       console.log(treeData.value);
     }
   });
 });