T-UVUE-UI1.0.0

Appearance

Tree 树 ​

树组件，用于创建一个树形结构，支持配置选择模式、选中的节点ID、折叠的节点ID、树数据、父节点项、父节点ID、树类型、是否开启手风琴模式、加载函数、是否显示复选框、是否懒加载、是否显示编辑按钮、是否显示删除按钮等。

示例 ​

vue
<template>
	<t-page title='Tree-基础功能' class="p.30">
		<t-card title="Tree 树" class="mb.30" sub-title="功能强大,多级节点展开、折叠、选择、懒加载，支持插槽灵活布局,并具有丰富的样式定制和事件响应能力"></t-card>
		<t-row class="tdr-tdb-h.100-faic-plr.15-mb.20">
			<t-text>当前选中：{{selects.join(',')}}</t-text>
		</t-row>
		<t-col class="tdr-tdb-p.20-mb.20">
			<t-tree :list='list' @change="onchange" :selectIds="['9','11','5']" :showEditButton="true" @edit="edit"
				@delete="trash" :showDeleteButton="true">
				<!-- 以下为右侧按钮插槽用法 -->
				<!-- <template v-slot:right="{item}">
					<t-row>
						<t-icon :stop="true" name='edit-pen' class="s.38-mr.15" :hover="true"
							@click="edit(item as TuiTreeData)" type="success"></t-icon>
						<t-icon :stop="true" name='trash' :hover="true" type="error" class="s.38"></t-icon>
					</t-row>
				</template> -->
			</t-tree>
		</t-col>
		<t-button class="mb.20" type='p' @click="goto('tree-select')">可选择</t-button>
		<t-button class="mb.20" type='s' @click="goto('tree-accordion')">手风琴模式</t-button>
		<t-button class="mb.20" type='e' @click="goto('tree-lazy')">懒加载</t-button>
	</t-page>
</template>

<script>
	import { TuiTreeData } from '@/uni_modules/t-ui'
	export default {
		data() {
			return {
				selects: [] as string[],
				list: [{
					id: '1',
					label: '一级 1',
					children: [{
						id: '4',
						label: '二级 1-1',
						children: [{
							id: '9',
							label: '三级 1-1-1',
							disabled: true,
							children: [{
								id: '11',
								label: '四级 1-1-1',
							}]
						}, {
							id: '12',
							label: '三级 1-1-1',
							children: [{
								id: '13',
								label: '四级 1-1-1',
							}]
						}, {
							id: '10',
							label: '三级 1-1-2'
						}]
					}]
				}, {
					id: '2',
					label: '一级 2',
					children: [{
						id: '5',
						label: '二级 2-1',
						disabled: true
					}, {
						id: '6',
						label: '二级 2-2'
					}]
				}, {
					id: '3',
					label: '一级 3',
					children: [{
						id: '7',
						label: '二级 3-1'
					}, {
						id: '8',
						label: '二级 3-2'
					}]
				}] as TuiTreeData[]
			}
		},
		methods: {
			trash(item : TuiTreeData, callback : () => void) {
				uni.showModal({
					title: '提示',
					content: `确认删除${item.label}吗？`,
					success: function (res) {
						if (res.confirm) {
							callback()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			edit(item : TuiTreeData) {
				uni.showModal({
					title: `id:${item.id},${item.label}`,
				})
			},
			goto(path : string) {
				uni.navigateTo({
					url: '/pages/component/layout/tree/' + path
				})
			},
			onchange(e : string[]) {
				this.selects = []
				this.selects = e
			}
		}
	}
</script>

<style lang="scss">

</style>

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

Props ​

名称描述类型默认值可选值
selectionMode选择模式String'multiple''multiple', 'radio'
selectIds选中的节点IDString[][]-
foldIds折叠的节点IDString[][]-
list树数据TuiTreeData[][]-
partenItem父节点项TuiTreeDatanull-
partenId父节点IDString'0'-
type树类型String'p''p', 'c'
accordion是否开启手风琴模式Booleanfalse-
load加载函数Function() => TuiTreeData[]-
showCheckbox是否显示复选框Booleanfalse-
lazy是否懒加载Booleanfalse-
showEditButton是否显示编辑按钮Booleanfalse-
showDeleteButton是否显示删除按钮Booleanfalse-

Events ​

事件名描述回调参数版本
change当选中项发生变化时触发expandIds-
click当点击节点时触发item-
edit当点击编辑按钮时触发item-
delete当点击删除按钮时触发item, callback-

Slots ​

名称描述
right右侧插槽，用于自定义操作按钮等