youxi-app/pages/demo/data/tree.uvue

<template>
	<cl-page>
		<view class="p-3">
			<demo-item :label="t('树形结构')">
				<cl-tree
					ref="treeRef"
					:list="list"
					:icon="isCustomIcon ? 'add-circle-line' : 'arrow-right-s-fill'"
					:expand-icon="isCustomIcon ? 'indeterminate-circle-line' : 'arrow-down-s-fill'"
					:show-checkbox="true"
					:check-strictly="checkStrictly"
				></cl-tree>

				<cl-list border :pt="{ className: 'mt-5' }">
					<cl-list-item :label="t('父子关联')">
						<cl-switch v-model="checkStrictly"></cl-switch>
					</cl-list-item>

					<cl-list-item :label="t('换个图标')">
						<cl-switch v-model="isCustomIcon"></cl-switch>
					</cl-list-item>
				</cl-list>
			</demo-item>

			<demo-item :label="t('选中操作')">
				<view class="mb-2">
					<cl-button @tap="setChecked">{{ t("选中部分节点") }}</cl-button>
				</view>

				<view class="mb-2">
					<cl-button @tap="getChecked">{{ t("获取选中节点") }}</cl-button>

					<cl-text
						v-if="checkedKeys.length > 0"
						:pt="{
							className: '!text-sm p-2'
						}"
						>{{ checkedKeys.join(", ") }}</cl-text
					>
				</view>

				<view class="mb-2">
					<cl-button @tap="getHalfChecked">{{ t("获取半选节点") }}</cl-button>

					<cl-text
						v-if="halfCheckedKeys.length > 0"
						:pt="{
							className: '!text-sm p-2'
						}"
						>{{ halfCheckedKeys.join(", ") }}</cl-text
					>
				</view>

				<view class="mb-2">
					<cl-button @tap="clearChecked">{{ t("清空选中") }}</cl-button>
				</view>
			</demo-item>

			<demo-item :label="t('展开操作')">
				<view class="mb-2">
					<cl-button @tap="expand">{{ t("展开部分节点") }}</cl-button>
				</view>

				<view class="mb-2">
					<cl-button @tap="getExpanded">{{ t("获取展开节点") }}</cl-button>

					<cl-text
						v-if="expandedKeys.length > 0"
						:pt="{
							className: '!text-sm p-2'
						}"
						>{{ expandedKeys.join(", ") }}</cl-text
					>
				</view>

				<view class="mb-2">
					<cl-button @tap="expandAll">{{ t("展开所有") }}</cl-button>
				</view>

				<view class="mb-2">
					<cl-button @tap="collapseAll">{{ t("收起所有") }}</cl-button>
				</view>
			</demo-item>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import DemoItem from "../components/item.uvue";
import { t } from "@/locale";
import { ref } from "vue";
import { useTree } from "@/uni_modules/cool-ui";

const list = useTree([
	{
		id: "1",
		label: "华为",
		children: [
			{
				id: "1-1",
				label: "手机",
				children: [
					{
						id: "1-1-1",
						label: "Mate系列",
						children: [
							{
								id: "1-1-1-1",
								label: "Mate 50"
							},
							{
								id: "1-1-1-2",
								label: "Mate 40"
							},
							{
								id: "1-1-1-3",
								label: "Mate 30"
							}
						]
					},
					{
						id: "1-1-2",
						label: "P系列",
						children: [
							{
								id: "1-1-2-1",
								label: "P60"
							},
							{
								id: "1-1-2-2",
								label: "P50"
							},
							{
								id: "1-1-2-3",
								label: "P40"
							}
						]
					}
				]
			},
			{
				id: "1-2",
				label: "笔记本",
				children: [
					{
						id: "1-2-1",
						label: "MateBook X",
						children: [
							{
								id: "1-2-1-1",
								label: "MateBook X Pro"
							},
							{
								id: "1-2-1-2",
								label: "MateBook X 2022"
							}
						]
					},
					{
						id: "1-2-2",
						label: "MateBook D",
						children: [
							{
								id: "1-2-2-1",
								label: "MateBook D 14"
							},
							{
								id: "1-2-2-2",
								label: "MateBook D 15"
							}
						]
					},
					{
						id: "1-2-3",
						label: "MateBook 13"
					}
				]
			}
		]
	},
	{
		id: "2",
		label: "小米",
		children: [
			{
				id: "2-1",
				label: "手机",
				children: [
					{
						id: "2-1-1",
						label: "小米数字系列"
					},
					{
						id: "2-1-2",
						label: "Redmi系列"
					}
				]
			},
			{
				id: "2-2",
				label: "家电",
				children: [
					{
						id: "2-2-1",
						label: "电视"
					},
					{
						id: "2-2-2",
						label: "空调"
					}
				]
			}
		]
	},
	{
		id: "3",
		label: "苹果",
		children: [
			{
				id: "3-1",
				label: "手机",
				children: [
					{
						id: "3-1-1",
						label: "iPhone 14"
					},
					{
						id: "3-1-2",
						label: "iPhone 13"
					}
				]
			},
			{
				id: "3-2",
				label: "平板",
				children: [
					{
						id: "3-2-1",
						label: "iPad Pro"
					},
					{
						id: "3-2-2",
						label: "iPad Air"
					}
				]
			}
		]
	},
	{
		id: "4",
		label: "OPPO",
		children: [
			{
				id: "4-1",
				label: "手机",
				children: [
					{
						id: "4-1-1",
						label: "Find系列"
					},
					{
						id: "4-1-2",
						label: "Reno系列"
					}
				]
			},
			{
				id: "4-2",
				label: "配件",
				children: [
					{
						id: "4-2-1",
						label: "耳机"
					},
					{
						id: "4-2-2",
						label: "手环"
					}
				]
			}
		]
	},
	{
		id: "5",
		label: "vivo",
		children: [
			{
				id: "5-1",
				label: "手机",
				children: [
					{
						id: "5-1-1",
						label: "X系列"
					},
					{
						id: "5-1-2",
						label: "S系列"
					}
				]
			},
			{
				id: "5-2",
				label: "智能设备",
				children: [
					{
						id: "5-2-1",
						label: "手表"
					},
					{
						id: "5-2-2",
						label: "耳机"
					}
				]
			}
		]
	}
]);

// 是否严格的遵循父子不互相关联
const checkStrictly = ref(false);

// 是否自定义图标
const isCustomIcon = ref(false);

// 树形组件引用
const treeRef = ref<ClTreeComponentPublicInstance | null>(null);

// 选中节点的keys
const checkedKeys = ref<(string | number)[]>([]);

// 半选节点的keys
const halfCheckedKeys = ref<(string | number)[]>([]);

// 展开节点的keys
const expandedKeys = ref<(string | number)[]>([]);

// 演示方法
function setChecked() {
	treeRef.value!.setCheckedKeys(["1-1", "2"]);
}

function getChecked() {
	checkedKeys.value = treeRef.value!.getCheckedKeys();
}

function clearChecked() {
	treeRef.value!.clearChecked();
	checkedKeys.value = [];
	halfCheckedKeys.value = [];
}

function getHalfChecked() {
	halfCheckedKeys.value = treeRef.value!.getHalfCheckedKeys();
}

function expand() {
	treeRef.value!.setExpandedKeys(["1", "1-1", "2"]);
}

function getExpanded() {
	expandedKeys.value = treeRef.value!.getExpandedKeys();
}

function expandAll() {
	treeRef.value!.expandAll();
	expandedKeys.value = treeRef.value!.getExpandedKeys();
}

function collapseAll() {
	treeRef.value!.collapseAll();
	expandedKeys.value = [];
}
</script>