Tui-Plus3.0.0

Appearance

Tree (树) ​

功能强大,多级节点展开、折叠、选择、懒加载，支持插槽灵活布局,并具有丰富的样式定制和事件响应能力

支持平台 ​

安卓ios鸿蒙web微信小程序
√√√√√

示例代码 ​

html
<template>
	<t-page title='Tree-基础功能' main-class="p-30">
		<t-card title="Tree 树" main-class="mb-30" sub-title="功能强大,多级节点展开、折叠、选择、懒加载，支持插槽灵活布局,并具有丰富的样式定制和事件响应能力"></t-card>
		<t-row main-class="tdr tdb h-100 faic plr-15 mb-20">
			<t-text>当前选中：{{selects.join(',')}}</t-text>
		</t-row>
		<t-tree :list="list" @plus="onplus" @edit="edit" @delete="trash" @change="onchange" :fold-ids="['1','2']" type="p"
			:showCheckbox="showCheckbox" :accordion="accordion" main-class="tdr mb-30"
			:selectIds="['9','13','18','21']">
		</t-tree>
		<t-button type="s" main-class="mb-20" @click="add">增加数据测试</t-button>
		<t-button main-class="mb-20" type='p'
			@click="showCheckbox=!showCheckbox">{{showCheckbox?'关闭选择':'可选择'}}</t-button>
		<t-button main-class="mb-20" type='s' @click="accordion=!accordion">{{accordion?'关闭手风琴模式':'打开手风琴模式'}}
		</t-button>
		<t-button main-class="mb-20" type='e' @click="goto('tree-lazy')">懒加载</t-button>
	</t-page>
</template>
<script>
	import { TuiGuid, TuiTreeData, TuiTreePlusData, TuiTreeEditData, TuiTreeDeleteData } from '@/uni_modules/tui-plugins'
	export default {
		data() {
			return {
				accordion: false,
				showCheckbox: true,
				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: '16',
						label: '二级 1-1',
						children: [{
							id: '17',
							label: '三级 1-1-1',
							disabled: true,
							children: [{
								id: '18',
								label: '四级 1-1-1'
							}]
						}, {
							id: '19',
							label: '三级 1-1-1',
							children: [{
								id: '20',
								label: '四级 1-1-1',
							}]
						}, {
							id: '21',
							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: {
			add() {
				this.list.push({
					id: TuiGuid(10),
					label: `新增${TuiGuid(5)}`,
					children: [{
						id: `新增${TuiGuid(5)}`,
						label: `新增${TuiGuid(5)}`,
						disabled: true,
					}, {
						id: `新增${TuiGuid(5)}`,
						label: `新增${TuiGuid(5)}`,
					}]
				} as TuiTreeData)
			},
			extend(e : number) {
				console.log(e)
			},
			onclick(e : TuiTreeData) {
				console.log(e)
			},
			trash(e : TuiTreeDeleteData) {
				uni.showModal({
					title: '提示',
					content: `确认删除${e.item.label}吗？`,
					success: function (res) {
						if (res.confirm) {
							e.callback(e)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onplus(e : TuiTreePlusData) {
				e.callback([{
					id: TuiGuid(10),
					label: `新增${TuiGuid(10)}`
				}] as TuiTreeData[], e)
			},
			edit(e : TuiTreeEditData) {
				uni.showModal({
					title: `label更新`,
					editable: true,
					success: (res) => {
						if (res.confirm) {
							e.callback(`${res.content}`, e)
						}
					}
				})
			},
			goto(path : string) {
				uni.navigateTo({
					url: '/pagesA/layout/tree/' + path
				})
			},
			onchange(e : Map<string, TuiTreeData>) {
				const val : string[] = []
				e.forEach((item : TuiTreeData) => {
					val.push(item.id)
				})
				this.selects = val
			}
		}
	}
</script>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
loadfunction()=>void懒加载函数
addIconStringplus-circle增加按钮图标
editIconStringedit-pen编辑按钮图标
selectIdsstring[][]选中项ID集合
showAddButtonBooleantrue是否显示增加按钮
showEditButtonBooleantrue是否显示编辑按钮
editIconClassString``编辑按钮图标样式
deleteIconStringtrash删除按钮图标
foldIdsstring[][]默认展开的ID集合设置
accordionBooleanfalse是否开启手风琴模式
lazyBooleanfalse是否开启懒加载
addIconClassString``增加按钮样式
showDeleteButtonBooleantrue是否显示删除按钮
deleteIconClassString``删除按钮图标样式
listany``数据源
showCheckboxBooleantrue是否显示选择框
rowHeightNumber50每行的高度单位px

事件 ​

名称返回参数说明
plus(e:TuiTreeDeleteData)点击新增、添加时触发
edit(e:TuiTreeDeleteData)点击编辑时触发
delete(e:TuiTreeDeleteData)点击删除时触发
change(seledtIds: Map<string, TuiTreeData>)选中状态变化时触发

插槽 ​

名称返回值说明
default-