给定如多级级联选择器,如果只选中第三级,则展示第三级,如果全选第一级或者第二级则只展示第一级或者第二级。(一级选项如果全部选中的话,只用获取一级选项的值就行了,如果没有全部选中 ,再获取二级选项的值)
如图,北京市没有全选,天津市全选,河北省没有全选,则最后结果为"朝阳区"、“天津市”、“大名县”、“古治区”
这里需要用到el-cascader
的getCheckedNodes
方法
父节点选中,那么所有子孙节点必然是选中的,则反推出:如果节点有父节点且父节点被选中了,那么这个节点就不是我们所需要的,所以可以使用filter过滤
<el-cascader
ref="test"
v-model="testData"
:options=""
:props=""
placeholder="请选择"
style="width: 100%"
collapse-tags
filterable
clearable
@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;
},
}