Cascader 级联选择器最后一层不出现空白

原创已于 2022-09-13 15:48:12 修改

· 579 阅读

2 ·

版权

文章标签：

#javascript #前端

于 2022-09-13 14:12:45 首次发布

Element UI 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Vue中使用el-cascader组件进行级联选择时，如何处理空子级并自定义选项分隔符。通过深入理解组件属性如'value'、'label'和'children'，以及递归方法处理空数组，避免显示空白。同时，讨论了如何设置分隔符，如将默认分隔符从'/‘更改为其他字符。

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

<el-cascader v-model="xxx" :options="options" :props="{ expandTrigger: 'hover',label:'name',value:'key',children:'regions' }"></el-cascader>

Props
value 指定选项的值为选项对象的某个属性值
label 指定选项标签为选项对象的某个属性值
children 指定选项的子选项为选项对象的某个属性值

在这里插入图片描述

// 模拟json

[{
	"name": "老大",
	"key": 1,
	"regions": [{ "name": "老二", "key": 2, 
		"regions": [{ "name": "老三", "key": 3,
			 "regions": [] }] }]
								}]

“regions”: [] 为空最后一级会出现空白

写一个方法数组如果为空返回undefined

getxxxData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].regions.length < 1) {
          data[i].regions = undefined;
        } else {
          this.getxxxData(data[i].regions);
        }
      }
      return data;
},