用tdesign-vue-next的t-tree-select做个下拉单选框

直接上代码：

1，HTML代码：

html 复制代码

<template>
  <t-tree-select v-model="selectedValue" :data="treeData" placeholder="请选择" clearable>
    <template #tree="{ node }">
      <div style="display: flex; align-items: center; width: 100%">
        <t-icon :name="getNodeIcon(node)" :style="{ color: getNodeColor(node), marginRight: '8px' }" />
        <span>{{ node.label }}</span>
        <t-badge v-if="node.data?.count" :count="node.data.count" style="margin-left: 8px" />
        <t-tag v-if="node.data?.tag" :theme="node.data.tagTheme" size="small" style="margin-left: 8px">
          {{ node.data.tag }}
        </t-tag>
      </div>
    </template>
  </t-tree-select>
</template>

2，TS代码：

TypeScript 复制代码

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

const selectedValue = ref('');

const treeData = ref([
  {
    id: -1,
    label: '主菜单',
    children: [
      {
        label: '系统管理',
        value: 'system',
        data: { icon: 'settings', count: 3, tag: '系统', tagTheme: 'primary' },
        children: [
          {
            label: '用户管理',
            value: 'user',
            data: { icon: 'user', count: 156, tag: '核心', tagTheme: 'danger' },
          },
          {
            label: '角色管理',
            value: 'role',
            data: { icon: 'usergroup', count: 12, tag: '权限', tagTheme: 'warning' },
          },
          {
            label: '菜单管理',
            value: 'menu',
            data: { icon: 'menu', count: 45 },
          },
        ],
      },
      {
        label: '内容管理',
        value: 'content',
        data: { icon: 'file', count: 5 },
        children: [
          { label: '文章管理', value: 'article', data: { icon: 'file-text' } },
          { label: '分类管理', value: 'category', data: { icon: 'folder' } },
        ],
      },
    ],
  },
]);

// 获取节点图标
const getNodeIcon = (node) => {
  return node.data?.icon || 'file';
};

// 获取节点颜色
const getNodeColor = (node) => {
  if (node.data?.tag === '核心') return '#ff4d4f';
  if (node.data?.tag === '权限') return '#fa8c16';
  if (node.data?.tag === '系统') return '#1890ff';
  return '#595959';
};
</script>

const selectedValue = ref('');定义保存选定的节点