TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
847
3.4m

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

Events 事件 ​

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

Slots 插槽 ​

名称说明数据

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/biaodan/tree

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
			<navigation-bar :background-color="xThemeConfigNavBgColor"
				:front-color="xThemeConfigNavFontColor"></navigation-bar>
		</page-meta>
		<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">树 xTree</x-text>
			<x-text color="#999999" class="mb-20">可允许父是否选中，子禁用状态，全局禁用，指定打开的id层级,打开子父关联后会半选状态及子父状态联动</x-text>

		</x-sheet>

		<x-sheet>
			<x-sheet color="info" dark-color="#333" :margin="['0','16']">
				<x-text color="#999999">打开的id：{{folderids.join(',')}}</x-text>
				<x-text color="#999999">选中的id：{{nowValue.join(',')}}</x-text>
			</x-sheet>
			<view class="flex flex-row flex-row-top-start">
				<x-button width="32%" class="mr-5 mb-5" @click="openFolder('2-1')">展开2-2</x-button>
				<x-button width="32%" class="mr-5 mb-5" @click="closeAll">关闭所有</x-button>
				<x-button width="32%" class="mr-5 mb-5" @click="setListData">添加数据</x-button>
			</view>
			<view class="flex flex-row flex-row-top-start">
				<x-button width="32%" class="mr-5 mb-5" @click="clearALl">清空数据</x-button>
				<x-button color="success" width="32%"
					:icon="disabledParentBox?'indeterminate-circle-fill':'checkbox-blank-circle-line'" class="mr-5 mb-5"
					@click="disabledParentBox=!disabledParentBox">禁父框</x-button>
				<x-button color="warn" width="32%"
					:icon="parentSelectedFullChildren?'checkbox-circle-fill':'checkbox-blank-circle-line'"
					class="mr-5 mb-5" @click="parentSelectedFullChildren=!parentSelectedFullChildren">子父关联</x-button>
			</view>
			<x-loading v-if="loading"></x-loading>
			<x-tree @change="change" :before-open-floder="asyncFun" v-else
				:parentSelectedFullChildren="parentSelectedFullChildren" :disabledParentBox="disabledParentBox"
				v-model="nowValue" v-model:folder-id="folderids" :list="list"></x-tree>
		</x-sheet>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'

	const loading = ref(true)
	const folderids = ref<string[]>(['2-1', '1-3'])
	const nowValue = ref<string[]>(['1', '3', '2-1-1'])
	const disabledParentBox = ref(false)
	const parentSelectedFullChildren = ref(true)
	const id = ref(4)

	const list = ref<UTSJSONObject[]>([
		{
			id: "1",
			text: "节点1",
			disabled: false,
			children: [
				{
					id: "1-1",
					text: "节点1-1",
					disabled: true,
					children: [
						{
							id: "1-1-1",
							text: "异步加载",
							disabled: false,
							children: [] as UTSJSONObject[]
						} as UTSJSONObject,
						{
							id: "1-1-2",
							text: "节点1-1-2",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "1-1-3",
							text: "节点1-1-3",
							disabled: false,
						} as UTSJSONObject,
					] as UTSJSONObject[],
				} as UTSJSONObject,
				{
					id: "1-2",
					text: "节点1-2",
					disabled: false,
					showEdite: true,
					showAdd: true,
					children: [
						{
							id: "1-2-1",
							text: "节点1-2-1",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "1-2-2",
							text: "节点1-2-2",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "1-2-3",
							text: "节点1-2-3",
							disabled: false,
						} as UTSJSONObject,
					] as UTSJSONObject[],
				} as UTSJSONObject,
				{
					id: "1-3",
					text: "节点1-3",
					disabled: false,
					showRemove: true,
					children: [
						{
							id: "1-3-1",
							text: "节点1-3-1",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "1-3-2",
							text: "节点1-3-2",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "1-3-3",
							text: "节点1-3-3",
							disabled: false,
						} as UTSJSONObject,
					] as UTSJSONObject[],
				} as UTSJSONObject,
			] as UTSJSONObject[],
		} as UTSJSONObject,
		{
			id: "2",
			text: "节点2",
			disabled: false,
			showEdite: true,
			children: [
				{
					id: "2-1",
					text: "节点2-1",
					disabled: false,
					children: [
						{
							id: "2-1-1",
							text: "节点2-1-1",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "2-1-2",
							text: "节点2-1-2",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "2-1-3",
							text: "节点2-1-3",
							disabled: false,
						} as UTSJSONObject,
					] as UTSJSONObject[],
				} as UTSJSONObject,
				{
					id: "2-2",
					text: "节点2-2",
					disabled: false,
					children: [
						{
							id: "2-2-1",
							text: "节点2-2-1",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "2-2-2",
							text: "节点2-2-2",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "2-2-3",
							text: "节点2-2-3",
							disabled: false,
						} as UTSJSONObject,
					] as UTSJSONObject[],
				} as UTSJSONObject,
				{
					id: "2-3",
					text: "节点2-3",
					disabled: false,
					children: [
						{
							id: "2-3-1",
							text: "节点2-3-1",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "2-3-2",
							text: "节点2-3-2",
							disabled: false,
						} as UTSJSONObject,
						{
							id: "2-3-3",
							text: "节点2-3-3",
							disabled: false,
						} as UTSJSONObject,
					] as UTSJSONObject[],
				} as UTSJSONObject,
			] as UTSJSONObject[],
		} as UTSJSONObject,
		{
			id: "3",
			text: "异步加载",
			disabled: false,
			children: [] as UTSJSONObject[]
		} as UTSJSONObject
	])

	onMounted(() => {
		setTimeout(() => {
			loading.value = false
		}, 500)
	})

	const change = (ids : string[], allParent : string[], allChildrenId : string[], allIdsAndInd : string[]) => {
		console.log("所有节点,不含半选", ids)
		console.log("所有父节点,不含半选", allParent)
		console.log("所有子节点,不含半选", allChildrenId)
		console.log("所有节点+半选状态节点", allIdsAndInd)
	}

	const closeAll = () => {
		folderids.value = [] as string[]
	}

	const openFolder = (id : string) => {
		folderids.value = [id] as string[]
	}

	const clearALl = () => {
		nowValue.value = [] as string[]
	}

	const asyncFun = (nodeId : string) : Promise<UTSJSONObject[]> => {
		uni.showLoading({ title: '加载中', mask: true })
		return new Promise((res, rej) => {
			setTimeout(() => {
				id.value += 1
				let idtest = id.value + '-' + Math.random().toString(16).substring(2, 6)
				res([
					{
						id: idtest,
						text: "节点1" + idtest,
						disabled: false,
					} as UTSJSONObject
				] as UTSJSONObject[])
				uni.hideLoading()
			}, 800)
		})
	}

	const setListData = () => {
		id.value += 1
		let ids = id.value.toString()
		list.value = list.value.concat([{
			id: ids,
			text: "节点" + ids,
			disabled: false,
			children: [
				{
					id: ids + "-4-1",
					text: ids + "节点4-1",
					disabled: false,
					children: [
						{
							id: ids + "-4-1-1",
							text: ids + "节点4-1-1",
							disabled: false,
						} as UTSJSONObject,
						{
							id: ids + "-4-1-2",
							text: ids + "节点4-1-2",
							disabled: false,
						} as UTSJSONObject,
						{
							id: ids + "-4-1-3",
							text: ids + "节点4-1-3",
							disabled: false,
						} as UTSJSONObject,
					] as UTSJSONObject[],
				} as UTSJSONObject,
			] as UTSJSONObject[],
		} as UTSJSONObject] as UTSJSONObject[])
	}
</script>

<style lang="scss">

</style>
最近更新