Vue里面使用el-cascader 级联选择器 children为空和获取value和label问题

问题描述

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设为undefineddata[i].children = undefined;} else {// children若不为空数组，则继续 递归调用 本方法this.getTreeData(data[i].children);}}return data;},

2，获取value和label问题
我们这里获取对应的label主要是通过props属性label和value进行自定义

先给级联选择器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) // 获取当前点击的节点的labelconsole.log(checkedNodes[0].pathLabels) // 获取由 label 组成的数组
}

Vue里面使用el-cascader 级联选择器 children为空和获取value和label问题相关推荐

vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法有两种触发子菜单的方式只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
Cascader 级联选择器如何根据给定的叶节点值设置默认值（数据回显）
转载自:Cascader 级联选择器如何设置默认值(数据回显)_༺举个栗子吧༻的博客-CSDN博客_选择器设置默认值官网cascader:https://element.eleme.cn/#/zh- ...
elementUI样式修改（Cascader 级联选择器）
elementui的问世,大大提高了前端开发的工作效率,但同时也带给我们不少烦恼.我们要用UI组件就免不了要对它做一些个性化定制需求,所以我们就必须要覆盖element的一些样式下面是我开发中遇到 ...
Cascader 级联选择器、Select 选择器和date-picker日期选择器的宽度设置
像select选择器的宽度设置一般是这样 <el-select v-model="value" placeholder="请选择" style=" ...
element-ui中Cascader 级联选择器组件使用(默认选择是value(id)，还想要获取label(name值))
我的需求是一个下拉框选中城市(先选中省-对应市显示-选中显示在下拉框中)注:区不要但是我之前封装了一个三级联动的,所以我需要重新封装一个: cityMap.js const map = {11000 ...
解决cascader级联选择器报错“level“ of null
1. 需求:级联选择器数据与另一文本框有联系,如果文本框有值,则相同的值在cascader的数据中置灰,不可选.如果先选择了cascader的值,再填文本框的值发现两选值相同,则将cascader的选 ...
修改element组件库中Cascader级联选择器下拉列表的默认样式
在保证不影响其他页面中Cascader样式的情况下(首先就不能删除scoped),如果css用到less预处理器,想到的第一个解决办法就是用深度选择器">>>" ...

Vue里面使用el-cascader 级联选择器 children为空和获取value和label问题

问题描述

Vue里面使用el-cascader 级联选择器 children为空和获取value和label问题相关推荐

最新文章

热门文章

Vue里面使用el-cascader 级联选择器 children为空 和获取value和label问题

问题描述

Vue里面使用el-cascader 级联选择器 children为空 和获取value和label问题相关推荐

最新文章

热门文章

Vue里面使用el-cascader 级联选择器 children为空和获取value和label问题

Vue里面使用el-cascader 级联选择器 children为空和获取value和label问题相关推荐