el-cascader级联选择器那些事

vue3+element-plus+ts

1、获取选中的节点及其所有上级

使用cascader组件提供的getCheckedNodes()

<el-cascader :options="options" :show-all-levels="false" @change="changeCascader" ref="cascader" />

const cascader = ref();

const options = [
	{
		value: 'fu1',
		label: '父1',
		type: '父type1',
		children: [
			{
				value: 'zi1',
				label: '子1',
				type: '子type1',
				children: [
					{
						value: 'sun1',
						label: '孙1',
						type: '孙type1',
					},
					{
						value: 'sun2',
						label: '孙2',
						type: '孙type2',
					},
				],
			},
			{
				value: 'zi2',
				label: '子2',
				type: '子type2',
			},
		],
	},
	{
		value: 'fu2',
		label: '父2',
		type: '父type2',
	},
];

const changeCascader = () => {
	let nodesInfo = cascader.value.getCheckedNodes();
	console.log(nodesInfo);
	//赋值
	form.storeId = nodesInfo[0].parent.data.value;
	form.storeName = nodesInfo[0].parent.data.label;
	form.spaceId = nodesInfo[0].data.value;
	form.spaceName = nodesInfo[0].data.label;
};