element中el-cascader级联选择器只有最后一级可以多选
更新时间：2024年01月15日 08:30:25 作者：小马甲丫
本文主要介绍了element中el-cascader级联选择器只有最后一级可以多选，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、前言
element-ui中el-cascader级联选择器只有最后一级可以多选，其它级只有展开子节点的功能，如下图所示：
可以观察到最后一级的li节点上没有属性aria-haspopup="true"，可以通过这个来隐藏非最后一级节点的el-checkbox来解决此问题
二、实现
2.1、设置popper-class和multiple
设置属性popper-class自定义浮层类名为popper-select，把props属性中的multiple设置为true，开启多选
<el-cascader
:options="options"
popper-class="popper-select"
:props="{
multiple: true
}"
/>
2.2、设置样式
选中li属性aria-haspopup为true的标签，隐藏此标签下的el-checkbox选择框。
注意：
style标签中不要加scope
.popper-select {
li[aria-haspopup="true"] {
.el-checkbox {
display: none;
}
}
}
三、最后
到此这篇关于element中el-cascader级联选择器只有最后一级可以多选的文章就介绍到这了,更多相关element el-cascader级联选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue+element DatePicker实现日期选择器封装
Vue Element DatePicker是一款基于Vue.js的日期选择控件，它提供了丰富的日期选择功能，支持日期范围选择、日期格式化、自定义日期格式、快捷选择等功能，极大地提高了用户的体验，是开发者必备的日期选择控件。2023-02-02
这篇文章主要介绍了vue 根据数组中某一项的值进行排序的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
当协议,域名,端口其中某一个不一致的时候,就会产生跨域问题,下面这篇文章主要给大家介绍了关于Vue项目中该如何解决跨域问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了在Vue中创建可重用的 Transition,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
在vue项目中怎么获取当前鼠标划过的坐标呢？下面通过本文给大家分享实现步骤，感兴趣的朋友跟随小编一起看看吧2021-11-11
这篇文章主要介绍了vue新建项目并配置标准路由过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法，需要传什么值，返回值是什么类型一目了然，这篇文章主要介绍了Vue-cli3中使用TS语法示例代码,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vueRouter--matcher之动态增减路由方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue数组响应式操作及高阶函数使用代码详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章主要为大家介绍了Vue使用vue-qr生成二维码的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
最新评论