TMUI4x

主题

TMUI4x2026-05-27
855
3.5m

树 xTree ​

在线预览
在线模拟尺寸:

介绍 ​

无限嵌套，可以异步加载。可以单独控制展开和关闭。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-tree/x-tree.uvue

使用 ​

ts

<x-tree></x-tree>

Props 属性 ​

名称说明类型默认值
modelValue等同v-model，当前选中的id
Array() : string[] => [] as string[]
folderId需要默认展开的父级id
如果这个id在深层等级，那它的所有父级都会被展开。
比如["1-2"]，此时1-2在最深级，那么它的父"1","1-1"会全部被默认打开
因此["1-2"]与["1","1-1","1-2"]其实没有区别
Array() : string[] => [] as string[]
parentSelectedFullChildren是否允许选中父级的时候把它的所有子级也选上。
注意这个属性的区别,如果你打开,那么意味着你无法控制父框选中状态,它的状态由它的子集来控制
比如子集全选中时,它自动选中,如果部分选中(它还是不会选中,但会有半选中状态),如果子集没有全选中,它会自动取消选中.点击本身时会取消或者选中所有子.
如果你设置为false,那就表示所有节点可以单独选择,它不受子节点控制.点击自己时,也不会选中子节点.
booleanfalse
disabledParentBox是否禁用父框选中,如果不禁用，但你的数据禁用了，还是会禁用。
但不影响你赋值选中
booleanfalse
disabled是否停用选中功能，只能是已读状态了
但不影响你赋值选中
booleanfalse
list列表数据,请一定要包含children字段代表子级。
如果需要异步加载需要包含一个children:[]空数组，如果没有子级
就不要包含children字段。字段:showEdite 显示编辑按钮,字段:showRemove显示删除节点按钮
showAdd 增加下级
Array() : UTSJSONObject[] => [] as UTSJSONObject[]
idKeyid字段名称
string"id"
labelKey标题名称
string"text"
color选中时的高亮颜色或者主题
string""
beforeOpenFloder异步选项时执行的异步加载
需要返回 Promise<UTSJSONObject[]>来自动填充到当前级别中的数据。
callbackType(itemId : string) : Promise<UTSJSONObject[]> => { return Promise.resolve([] as UTSJSONObject[]) }
floaderIcon关闭和打开时图标/图片地址
必须为长度2,第一项关闭时图标,第2项关闭时图标
Array() : string[] => ['add-circle-line','indeterminate-circle-line'] as string[]
showFloaderIcon是否显示默认前置开和关的图标
booleantrue
showChecked是否显示选中的box图标
booleantrue
checkedIcon选中与未选中时的图标/图片地址
必须为长度2,第一项未选中,第二项选中时图标
Array() : string[] => ['checkbox-blank-circle-line','checkbox-circle-fill'] as string[]

Events 事件 ​

名称参数说明
changeids: string[]allParent: string[]allChildrenId: string[]allIdsAndInd: string[]选中切换时触发
childrenClick-节点标签被点击
@@param {UTSJSONObject} item - 打开的id数组
openFolderChange-父节点展开和关闭
@@param {string[]} ids - 打开的id数组
update:folderId-等同v-model:folder-id
update:modelValue--

Slots 插槽 ​

名称说明数据

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/chart/tree

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<x-sheet>
			<view class="flex-row flex-wrap mb-12">
				<x-tag class="mr-8 mb-8" :color="chartType == 'sunburst' ? 'primary' : 'grey-5'" @click="switchType('sunburst')">旭日图</x-tag>
				<x-tag class="mr-8 mb-8" :color="chartType == 'treemap' ? 'primary' : 'grey-5'" @click="switchType('treemap')">矩形树图</x-tag>
			</view>
			<x-chart :options="chartOptions"></x-chart>
		</x-sheet>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script lang="ts" setup>
	import { computed, ref } from "vue"
	import { ChartOptions, ChartSeriesOptions } from "@/uni_modules/tmx-ui/core/canvas/chart/types.uts"

	type ChartType = 'sunburst' | 'treemap'
	const chartType = ref<ChartType>('sunburst')

	const buildTreeData = () : UTSJSONObject[] => {
		return [
			{
				name: '技术部', children: [
					{ name: '前端', children: [
						{ name: 'Vue', children: [{ name: 'Vue2', value: 40 }, { name: 'Vue3', value: 80 }] },
						{ name: 'React', children: [{ name: 'Hooks', value: 50 }, { name: 'Redux', value: 30 }] },
						{ name: 'Angular', value: 25 },
						{ name: 'Svelte', value: 15 }
					] },
					{ name: '后端', children: [
						{ name: 'Java', children: [{ name: 'Spring', value: 90 }, { name: 'Dubbo', value: 40 }] },
						{ name: 'Go', children: [{ name: 'Gin', value: 50 }, { name: 'gRPC', value: 35 }] },
						{ name: 'Python', value: 60 },
						{ name: 'Rust', value: 25 }
					] },
					{ name: '运维', children: [{ name: 'K8s', value: 40 }, { name: 'Docker', value: 30 }, { name: 'CI/CD', value: 20 }] },
					{ name: '测试', value: 35 }
				]
			} as UTSJSONObject,
			{
				name: '产品部', children: [
					{ name: '产品设计', children: [{ name: 'B端', value: 45 }, { name: 'C端', value: 55 }] },
					{ name: '用户研究', value: 40 },
					{ name: '数据分析', children: [{ name: '埋点', value: 30 }, { name: '报表', value: 25 }] },
					{ name: '项目管理', value: 35 }
				]
			} as UTSJSONObject,
			{
				name: '市场部', children: [
					{ name: '品牌', children: [{ name: 'VI', value: 20 }, { name: '公关', value: 30 }] },
					{ name: '增长', children: [{ name: 'SEO', value: 40 }, { name: '投放', value: 50 }, { name: '社媒', value: 35 }] },
					{ name: '渠道', value: 45 }
				]
			} as UTSJSONObject,
			{
				name: '设计部', children: [
					{ name: 'UI', value: 60 },
					{ name: 'UX', value: 45 },
					{ name: '动效', value: 20 }
				]
			} as UTSJSONObject,
			{
				name: '财务部', children: [
					{ name: '会计', value: 30 },
					{ name: '审计', value: 20 },
					{ name: '税务', value: 15 }
				]
			} as UTSJSONObject,
			{ name: '行政部', value: 25 } as UTSJSONObject,
			{ name: '法务部', value: 20 } as UTSJSONObject,
		] as UTSJSONObject[]
	}
	const treeData = buildTreeData()

	const getSunburstOptions = () : ChartOptions => {
		return {
			data: treeData,
			series: [{ type: 'sunburst' } as ChartSeriesOptions],
			title: { show: true, text: '组织架构旭日图' },
			padding: { left: 16, right: 16, top: 24, bottom: 16 },
			xAxis: { show: false }, yAxis: { show: false }, dataZoom: { enabled: false }
		} as ChartOptions
	}

	const getTreemapOptions = () : ChartOptions => {
		return {
			data: treeData,
			series: [{ type: 'treemap' } as ChartSeriesOptions],
			title: { show: true, text: '矩形树图' },
			padding: { left: 8, right: 8, top: 24, bottom: 8 },
			xAxis: { show: false }, yAxis: { show: false }, dataZoom: { enabled: false }
		} as ChartOptions
	}

	const chartOptions = computed(() : ChartOptions => {
		if (chartType.value == 'treemap') return getTreemapOptions()
		return getSunburstOptions()
	})

	const switchType = (type : ChartType) => {
		chartType.value = type
	}
</script>

<style lang="scss">
</style>
最近更新