el-cascader 级联选择器 children为空和获取value和label问题

最新推荐文章于 2025-05-27 09:09:30 发布

刘炳岗

最新推荐文章于 2025-05-27 09:09:30 发布

阅读量4.1k

点赞数 2

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42272558/article/details/115077710

版权

该博客主要介绍了在Vue中使用el-cascader组件遇到的问题及其解决方案。当后端返回的树形数据最后一级children为空时，会出现空白显示。解决方法是在获取数据后递归检查并设置children为undefined。同时，文章还展示了如何通过ref获取级联选择器的value、label和由label组成的数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`1. 出现问题bug: el-cascader控件最后一级出现空白暂无数据`

在后端处理完树形数据之后最后一个children数组为空数组，这样就会产生bug

解决方法: （和后端处理数据一样就行递归判断数组是否为空）

      getClassificationTree() {
			getClassificationTree({
				'name': 'name'
			}).then(response => {
				this.options = this.getTreeData(response.data);
			})
		},
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i].children.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i].children = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i].children);
				}
			}
			return data;
		},

`2. 获取value和label问题`

先给级联选择器ref=""重命一个新组件名为xxxxLabel

<el-cascader ref="xxxxLabel"
			:options="options"
			:props="{ value: 'Id',label: 'Name',children: 'children'}"
			@change="handleChange2">
</el-cascader>

handleChange2: function(e) {
	const checkedNodes = this.$refs['xxxxLabel'].getCheckedNodes()
	console.log(checkedNodes) // 获取当前点击的节点
    console.log(checkedNodes[0].data.label) // 获取当前点击的节点的label
    console.log(checkedNodes[0].pathLabels) // 获取由 label 组成的数组
}