cl-tree 添加 modelValue、multiple 参数

pages/demo/data/tree.uvue

@@ -3,11 +3,13 @@
 		<view class="p-3">
 			<demo-item :label="t('树形结构')">
 				<cl-tree
+					v-model="checkedKeys"
 					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"
+					:checkable="true"
+					:multiple="true"
 					:check-strictly="checkStrictly"
 				></cl-tree>
 
@@ -22,6 +24,10 @@
 				</cl-list>
 			</demo-item>
 
+			<demo-item :label="t('选中值')">
+				<cl-text>{{ checkedKeys.join("、") }}</cl-text>
+			</demo-item>
+
 			<demo-item :label="t('选中操作')">
 				<view class="mb-2">
 					<cl-button @tap="setChecked">{{ t("选中部分节点") }}</cl-button>
@@ -29,14 +35,6 @@
 
 				<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">
@@ -47,7 +45,7 @@
 						:pt="{
 							className: '!text-sm p-2'
 						}"
-						>{{ halfCheckedKeys.join(", ") }}</cl-text
+						>{{ halfCheckedKeys.join("、") }}</cl-text
 					>
 				</view>
 
@@ -69,7 +67,7 @@
 						:pt="{
 							className: '!text-sm p-2'
 						}"
-						>{{ expandedKeys.join(", ") }}</cl-text
+						>{{ expandedKeys.join("、") }}</cl-text
 					>
 				</view>
 
@@ -89,232 +87,247 @@
 import DemoItem from "../components/item.uvue";
 import { t } from "@/locale";
 import { ref } from "vue";
-import { useTree } from "@/uni_modules/cool-ui";
+import { useTree, useUi, type ClTreeItem } from "@/uni_modules/cool-ui";
 
-const list = useTree([
-	{
-		id: "1",
-		label: "华为",
-		children: [
+const ui = useUi();
+
+const list = ref<ClTreeItem[]>([]);
+
+function refresh() {
+	ui.showLoading();
+
+	setTimeout(() => {
+		list.value = useTree([
 			{
-				id: "1-1",
-				label: "手机",
+				id: "1",
+				label: "华为",
 				children: [
 					{
-						id: "1-1-1",
-						label: "Mate系列",
+						id: "1-1",
+						label: "手机",
 						children: [
 							{
-								id: "1-1-1-1",
-								label: "Mate 50"
+								id: "1-1-1",
+								label: "Mate系列",
+								children: [
+									{
+										id: "1-1-1-1",
+										label: "Mate 50"
+									},
+									{
+										id: "1-1-1-2",
+										disabled: true,
+										label: "Mate 40"
+									},
+									{
+										id: "1-1-1-3",
+										label: "Mate 30"
+									}
+								]
 							},
 							{
-								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",
+										disabled: true,
+										label: "P60"
+									},
+									{
+										id: "1-1-2-2",
+										label: "P50"
+									},
+									{
+										id: "1-1-2-3",
+										label: "P40"
+									}
+								]
 							}
 						]
 					},
 					{
-						id: "1-1-2",
-						label: "P系列",
+						id: "1-2",
+						label: "笔记本",
 						children: [
 							{
-								id: "1-1-2-1",
-								label: "P60"
+								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-1-2-2",
-								label: "P50"
+								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-1-2-3",
-								label: "P40"
+								id: "1-2-3",
+								label: "MateBook 13"
 							}
 						]
 					}
 				]
 			},
 			{
-				id: "1-2",
-				label: "笔记本",
+				id: "2",
+				label: "小米",
+				isExpand: true,
 				children: [
 					{
-						id: "1-2-1",
-						label: "MateBook X",
+						id: "2-1",
+						label: "手机",
 						children: [
 							{
-								id: "1-2-1-1",
-								label: "MateBook X Pro"
+								id: "2-1-1",
+								label: "小米数字系列"
 							},
 							{
-								id: "1-2-1-2",
-								label: "MateBook X 2022"
+								id: "2-1-2",
+								label: "Redmi系列"
 							}
 						]
 					},
 					{
-						id: "1-2-2",
-						label: "MateBook D",
+						id: "2-2",
+						label: "家电",
 						children: [
 							{
-								id: "1-2-2-1",
-								label: "MateBook D 14"
+								id: "2-2-1",
+								label: "电视"
 							},
 							{
-								id: "1-2-2-2",
-								label: "MateBook D 15"
+								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: "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: "3-2",
+						label: "平板",
+						children: [
+							{
+								id: "3-2-1",
+								label: "iPad Pro"
+							},
+							{
+								id: "3-2-2",
+								label: "iPad Air"
+							}
+						]
 					}
 				]
 			},
 			{
-				id: "2-2",
-				label: "家电",
+				id: "4",
+				label: "OPPO",
 				children: [
 					{
-						id: "2-2-1",
-						label: "电视"
+						id: "4-1",
+						label: "手机",
+						children: [
+							{
+								id: "4-1-1",
+								label: "Find系列"
+							},
+							{
+								id: "4-1-2",
+								label: "Reno系列"
+							}
+						]
 					},
 					{
-						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: "4-2",
+						label: "配件",
+						children: [
+							{
+								id: "4-2-1",
+								label: "耳机"
+							},
+							{
+								id: "4-2-2",
+								label: "手环"
+							}
+						]
 					}
 				]
 			},
 			{
-				id: "3-2",
-				label: "平板",
+				id: "5",
+				label: "vivo",
 				children: [
 					{
-						id: "3-2-1",
-						label: "iPad Pro"
+						id: "5-1",
+						label: "手机",
+						children: [
+							{
+								id: "5-1-1",
+								label: "X系列"
+							},
+							{
+								id: "5-1-2",
+								label: "S系列"
+							}
+						]
 					},
 					{
-						id: "3-2-2",
-						label: "iPad Air"
+						id: "5-2",
+						label: "智能设备",
+						children: [
+							{
+								id: "5-2-1",
+								label: "手表"
+							},
+							{
+								id: "5-2-2",
+								label: "耳机"
+							}
+						]
 					}
 				]
 			}
-		]
-	},
-	{
-		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: "耳机"
-					}
-				]
-			}
-		]
-	}
-]);
+		]);
+
+		ui.hideLoading();
+	}, 500);
+}
 
 // 是否严格的遵循父子不互相关联
 const checkStrictly = ref(false);
@@ -326,7 +339,8 @@ const isCustomIcon = ref(false);
 const treeRef = ref<ClTreeComponentPublicInstance | null>(null);
 
 // 选中节点的keys
-const checkedKeys = ref<(string | number)[]>([]);
+const checkedKeys = ref<(string | number)[]>(["1-1-1-1", "2-1-1", "2-1-2"]);
+const checkedKeys2 = ref<string | null>("1-1-1");
 
 // 半选节点的keys
 const halfCheckedKeys = ref<(string | number)[]>([]);
@@ -354,7 +368,7 @@ function getHalfChecked() {
 }
 
 function expand() {
-	treeRef.value!.setExpandedKeys(["1", "1-1", "2"]);
+	treeRef.value!.setExpandedKeys(["4", "5"]);
 }
 
 function getExpanded() {
@@ -370,4 +384,8 @@ function collapseAll() {
 	treeRef.value!.collapseAll();
 	expandedKeys.value = [];
 }
+
+onReady(() => {
+	refresh();
+});
 </script>