element-ui中el-cascader级联选择器多选判断是否是全选

给定如多级级联选择器，如果只选中第三级，则展示第三级，如果全选第一级或者第二级则只展示第一级或者第二级。(一级选项如果全部选中的话，只用获取一级选项的值就行了，如果没有全部选中 ,再获取二级选项的值)

如图，北京市没有全选，天津市全选，河北省没有全选，则最后结果为"朝阳区"、“天津市”、“大名县”、“古治区”
这里需要用到el-cascader的getCheckedNodes方法

父节点选中，那么所有子孙节点必然是选中的，则反推出：如果节点有父节点且父节点被选中了，那么这个节点就不是我们所需要的，所以可以使用filter过滤

<el-cascaderref="test"v-model="testData":options="":props=""placeholder="请选择"style="width: 100%"collapse-tagsfilterableclearable@change="handleChange('test')">
</el-cascader>mounted(){this.handleChange('test'); // 初始化
}
methods: {handleChange(value) {let checkedNodeList = this.$refs[value].getCheckedNodes();checkedNodeList = checkedNodeList.filter(item => !(item.parent && item.parent.checked)); // 核心this[value] = checkedNodeList;},
}

element-ui中el-cascader级联选择器多选判断是否是全选相关推荐

ElementUI中的 Cascader 级联选择器卡顿问题
当数据多的时候可能出现卡顿的情况,在点击小叉号进行删除已经选择的数据的时候,也可能会出现卡顿的情况,在当重置清空数据的时候,使用一下方式或许会避免页面卡顿, let obj = {}obj.stop ...
Element UI中el-calendar日历的年月快捷选择（可下拉选框选择）
需求: 以日历形式展现当前页面.其中,年月可进行下拉选择,默认选中当月,用户可以自由点选日期实现思路:右上角年月元素隐藏掉,写一个下拉选框,通过css定位到正确位置,通过vue计算属性进行数据绑定 ...
Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
Vue+element ui表单中省市区级联选择—v-distpicker/Cascader
v-distpicker组件或Cascader 级联选择器 1.页面 <el-form ref="form" :model="form" :rules=& ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
elementUI样式修改（Cascader 级联选择器）
elementui的问世,大大提高了前端开发的工作效率,但同时也带给我们不少烦恼.我们要用UI组件就免不了要对它做一些个性化定制需求,所以我们就必须要覆盖element的一些样式下面是我开发中遇到 ...
Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法有两种触发子菜单的方式只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
Cascader 级联选择器如何根据给定的叶节点值设置默认值（数据回显）
转载自:Cascader 级联选择器如何设置默认值(数据回显)_༺举个栗子吧༻的博客-CSDN博客_选择器设置默认值官网cascader:https://element.eleme.cn/#/zh- ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...

element-ui中el-cascader级联选择器多选判断是否是全选

element-ui中el-cascader级联选择器多选判断是否是全选相关推荐

最新文章

热门文章