PremiumTree 增强树

功能丰富的树形组件，支持单选、多选（复选框级联）、展开/折叠，每个节点可配置图标、元数据、副标题和颜色色调。

基本用法

<template>
  <PremiumTree
    :data="treeData"
    :selected-keys="selectedKeys"
    checkable
    show-meta
    :get-node-icon="getIcon"
    :get-node-meta="getMeta"
    @select="handleSelect"
    @update:selected-keys="keys => selectedKeys = keys"
  />
</template>

<script setup>
import { PremiumTree } from '@/components/common'
import { ref } from 'vue'

const treeData = [
  { key: '1', label: '总公司', children: [
    { key: '1-1', label: '研发部', meta: '32人' },
    { key: '1-2', label: '市场部', meta: '18人' }
  ]}
]
const selectedKeys = ref([])

const getIcon = (node) => node.children ? 'i-carbon-folder' : 'i-carbon-document'
const getMeta = (node) => node.meta

const handleSelect = (node) => {
  console.log('选中:', node)
}
</script>

Props

属性	类型	默认值	说明
data	Array	[]	树形数据数组
cascadeData	Array	null	可选独立数据源用于级联计算，默认回退到 data
selectedKeys	Array	[]	当前选中的节点键数组（单选时只取第一个）
expandedKeys	Array	[]	当前展开的节点键数组
checkedKeys	Array	[]	当前复选框选中的节点键数组
checkable	Boolean	false	是否启用复选框
cascade	Boolean	true	是否级联复选框（选中父级影响所有子级）
keyField	String	'key'	节点唯一标识字段
labelField	String	'label'	节点显示标签字段
childrenField	String	'children'	子节点数组字段
getNodeIcon	Function	null	返回节点图标的函数 (node) => icon
getNodeMeta	Function	null	返回元数据文本的函数 (node) => meta
getNodeSubtitle	Function	null	返回副标题文本的函数 (node) => subtitle
getNodeTone	Function	null	返回颜色色调的函数 (node) => tone
actions	Array | Function	[]	每个节点的操作项
showMeta	Boolean	false	是否显示元数据
showSubtitle	Boolean	false	是否显示副标题

Events

事件名	参数	说明
update:selected-keys	(keys, node)	选中键变化
update:expanded-keys	(keys, node)	展开键变化
update:checked-keys	(keys, node)	复选框键变化
select	(node)	节点被选中/点击
check	(keys, node)	复选框状态变化
action	(action, node)	节点操作被点击