element中el-cascader级联选择器只有最后一级可以多选

2024-01-14 13:12

本文主要是介绍element中el-cascader级联选择器只有最后一级可以多选,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 一、前言
  • 二、实现
    • 2.1、设置`popper-class`和`multiple`
    • 2.2、设置样式
  • 三、最后

一、前言

element-uiel-cascader级联选择器只有最后一级可以多选,其它级只有展开子节点的功能,如下图所示:

可以观察到最后一级的li节点上没有属性aria-haspopup="true",可以通过这个来隐藏非最后一级节点的el-checkbox来解决此问题

二、实现

2.1、设置popper-classmultiple

设置属性popper-class自定义浮层类名为popper-select,把props属性中的multiple设置为true,开启多选

<el-cascader:options="options"popper-class="popper-select":props="{multiple: true}"
/>

2.2、设置样式

选中li属性aria-haspopuptrue的标签,隐藏此标签下的el-checkbox选择框。

注意:style标签中不要加 scope

.popper-select {li[aria-haspopup="true"] {.el-checkbox {display: none;}}
}

三、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

这篇关于element中el-cascader级联选择器只有最后一级可以多选的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/605281

相关文章

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面,不做任何操作,点击重置按钮,再进行下

vue2实践:el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单,如图: 当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。 至少要有一行数据,但是没有上限。 思路 这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是: 1、table里面的每一个cell,需要放置一个input来支持用户编辑。 2、最后一列放置两个b

css选择器和xpath选择器在线转换器

具体前往:Css Selector(选择器)转Xpath在线工具

leetcode#496. Next Greater Element I

题目 You are given two arrays (without duplicates) nums1 and nums2 where nums1’s elements are subset of nums2. Find all the next greater numbers for nums1’s elements in the corresponding places of nums

ExtMvc store不能通过xtype选择器得到的办法

store 不能通过xtype选择器得到,  init : function() {         this.control({                 'smsmenu gridpanel[name='company'] : {                                         render:function(grid,opts){

vue el-dialog嵌套解决无法点击问题

产生原因: 当你在 el-dialog 上嵌套另一个 el-dialog 窗口时,可能会遇到内部对话框无法点击的问题。这通常是由于嵌套对话框的遮罩层(overlay)或其他样式问题造成的。 解决方案: 如果你的 el-dialog 组件支持 append-to-body 属性,你可以将对话框附加到 body 元素上,以避免 z-index 问题。 <template><el-dialo

element-ui打包之后图标不显示,woff、ttf加载404

1、bug 起因 昨天在 vue 项目中编写 element-ui 的树形结构的表格,发现项目中无法生效,定位问题之后发现项目使用的 element-ui 的版本是 2.4.11 。看了官方最新版本是 2.15.14,然后得知 2.4.11 版本是不支持表格树形结构的。于是决定升级 element-ui 的版本,方便后续的开发。 升级之后本地简单的过了一遍系统功能,并没有发现有什么不妥,于

el-date-picker年份选择默认值为当前年,并且将获取时间转为年月日格式

<el-date-pickervalue-format="yyyy"v-model="leftQuery.year":disabled="timeArr && timeArr.length != 0 ? true : false"type="year"placeholder="选择年"@change=changeYear:picker-options="pickerOptions"></el-da