el-tree-select那些事

下拉菜单树形选择器
用于记录工作及日常学习涉及到的一些需求和问题
vue3

1、获取el-tree-select选中的任意层级的节点对象

1-1数据集

1-2画面
1-3代码
1-3-1画面代码

						<el-tree-select
							v-model="storeSpaceId"
							:data="storeTree"
							:render-after-expand="false"
							:check-strictly="false"
							show-checkbox
							class="w100"
							placeholder="请选择仓库/库区"
							ref="treeRef"
							@check-change="getCheckedNodes"
						>
						</el-tree-select>

1-3-2变量相关代码

const treeRef = ref();
const storeSpaceId = ref();
const storeTree = ref<any[]>([]); //仓库-库区树

1-3-3选择节点事件代码

//树形选择，获取
const getCheckedNodes = () => {
	const checkedNodes = treeRef.value!.getCheckedNodes(false, false);
	// checkedNodes就是所选择的节点对象
};

2、el-tree-select单选，点击父级可全选子集

						<el-tree-select
							v-model="spuSkuId"
							:data="spuLinkTree"
							:render-after-expand="false"
							check-strictly
							show-checkbox
							multiple
							class="w100"
							placeholder="请选择"
							ref="spuLinkRef"
							@check-change="getCheckedNodes"
						>
						</el-tree-select>

如果不加check-strictly属性，就是如下效果。子项只能单独选择。

加check-strictly属性，是如下效果。选择一个父级，可以将其所有子集勾选。