Quasar之q-tree选择节点

话不多说，直接上代码。

<q-tree
	:nodes="testData"
	node-key="label"
	default-expand-all
	v-model:selected="selected"
	no-connectors
	@click="handleClick"
/>

备注：default-expand-all- -初次渲染展开全部节点
no-connectors- -无连接线
v-model:selected=“selected”- -选择的节点(官方文档是用的:selected.sync=“selected”，可以查看Quasar q-tree。.sync和v-model实现效果在这里基本一致，都可以实现父子组件中的数据的双向通信。 )

Tips：v-model和.async本质上都是实现双向绑定的语法糖,vue3子组件中自定义实现v-model的方法改为和.sync一致，因此去除.sync，直接用v-model代替。

js部分代码：

setup(props, ctx) {
		const selected = ref(null);
		
		const testData = ref([
			{
				label: "娱乐",
				children: [
					{
						label: "看视频",
						children: [
							{
								label: "腾讯",
								children: [
									{
										label: "哔哩哔哩"
									}
								]
							},
							{
								label: "听歌",
								children: [{ label: "网易云" }]
							},
							{
								label: "玩游戏",
								children: [{ label: "LOL" }]
							}
						]
					}
				]
			}
		]);
		// 选择
		const handleClick = () => {
			console.log("您当前所选择的是：", selected.value);
			ctx.emit("getList", selected.value);
		};
		return {
			handleClick,
			testData,
			selected
		};
	}

最后看效果图：