关于elementui中select选择器多选功能的探究

最新推荐文章于 2024-06-19 11:20:54 发布
最新推荐文章于 2024-06-19 11:20:54 发布
阅读量325 收藏 1
点赞数
分类专栏： ElementUI 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxcvbnm173/article/details/118567445
版权
本文探讨了如何使用CSS和HTML创建具有多选功能的下拉选择框。通过将input框与div层叠，实现了一个显示tag样式的下拉选择。这种方法使得选择数据后的内容不在input内，而是在div内展示，从而能显示更多的信息。
摘要由CSDN通过智能技术生成
前言

对select选择器的多选展示方法比较好奇，所以想要研究一下

长这样

在这里插入图片描述

研究过程

研究过程比较乏善可陈，直接看html代码，力大砖飞

研究结果

看图
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

总结

总的来说是通过将input框与div层叠的方式，组合成一个看似是下拉选择框的选择框

选择数据后的实际展示内容并不在input框内部，而是在div内部，所以可以显示tag样式的数据

后语

css还是太博大了，我学的还没它出的快…

无尽的拉格朗日
关注
专栏目录
elementUI之el-select多选tag数值问题，研究和改造
禅思院
07-21 8858
写在前面的话 我们在使用官网的UI组件的时候，总会遇到这样活着那样的展示问题，这些虽然都是小小的问题，但是产品经理就是非要和你过不去，说这些不是我想要的样子，而我们就是因为这个小小展示问题，功能没问题，就是要花很大的时间，将官网上的组件进行一顿改造，其实我们也很欲哭无泪啊！毕竟组件不是我们开发的，开发一套组件也不是一朝一夕能完成的。所以我们只能默默的去改造，改造的过程，心里也不知道埋怨多久啦！下面我改造和研究的一些组件的问题，以select 多选tag 问题！ 使用过程 我们用的是element-ui 的
Element-ui中 选择器（select）多选下拉框实现全选功能
热门推荐
明天也要努力的博客
09-06 2万+
需求： 选择器组件（Select）支持多选，但是不支持全选。如果需要实现这个功能，该怎么修改呢？ 方案一：下拉项增加一个【全选】，实现以下几种功能 下拉选项全都勾选时，【全选】自动勾选； 下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选； 下拉选项全都勾选时，点击【全选】后，所有下拉选项不勾选； 下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了； 效果： 方案二：直接添加一个【全选】复选框，实现的功能与方案一相同 效果： 完整代码 父组件 <template&g
elementUI select 支持多选
qq_38909255的博客
12-27 3276
element-ui中select支持多选；支持输入模糊匹配下拉项；支持清空选项；
vue element-ui 中select选择器多选功能
buukyjmvni的博客
08-31 2097
多选功能根据elementui官方写法就没问题，很简单 在这里记录一下在项目中遇到了一个bug⬇️ 在进行多选时，取消多选后再次点击刚刚取消的选项，出现了两个相同的tag，报id重复错误；但是直接点tag上的小叉叉再添加，就不会重复出现。 检查了一遍又一遍，发现在选择器上绑定了一个@removeTag，写了一个删除tag的方法，而@change方法里的一通逻辑，并没有删除这一动作，于是添加逻辑： 一、选择器内： <el-form-item label="" > <el-
elementUI中el-select可选全部/多选/单选(最少选一个)
Sleeping_Fairy的博客
10-20 6110
elementUI中el-select可选全部/多选/单选(最少选一个)
iview中Select 选择器多选校验方法
08-27
iView 中 Select 选择器多选校验方法 iView 是一个基于 Vue.js 的高质量 UI 组件库，它提供了许多实用的组件来帮助开发者快速构建应用程序。其中，Select 选择器是一个非常常用的组件，它可以帮助用户从多个选项中...
elementui选择器多选时闪_ElementUI的select选择器的坑(单选，多选)
weixin_32824711的博客
12-24 1768
前言element的组件是挺方便和简洁的，但是我在项目中遇到了关于它的很多坑，官网的文字过于官方和简洁，以至于经常犯摸不着头脑的问题，这篇总结下我遇到的select选择器的坑。单选功能在另一篇博客讲到了下拉框的绑值问题，我的下拉框动态绑值时出现了输入框内绑定了value值的情况，在我另一篇有讲：下拉框组件el-select在编辑对话框中直接显示option的value值而非选中绑定值选项通过在选择...
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
在这个特定的场景中，我们关注的是Element-UI中的选择器组件——`<el-select>`，特别是如何实现多选下拉框的全选功能。在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 ...
vue elementui中选择器（select）多选时添加全选功能
jj_0628的博客
12-24 7170
存在这样一个问题，当下拉列表中的选项过多时，想要全部选中，目前elementui的select多选中没有提供全选功能，想要解决这个问题分为以下步骤 首先将从后台获取过来的下拉列表数据中添加一个”全选“的选项 当选中项发生变化时进行一系列判断 1、当前选中数据中存在’全选‘的选项，则将下拉数据赋值给v-model绑定的数据 2、与旧数据（上次选中数据）进...
element ui中的select多选问题
weixin_46319117的博客
10-29 3662
在使用select下拉框多选时，在编辑用户角色时，编辑界面为select下拉框的model赋值了，选择的数据有问题，输入框中的值不能与下拉框的值对应上。
element ui select多选组件 重构
05-03
element ui select多选组件 标签根据数据属性显示颜色不同, 至于plugins
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
11-20
这是一个项目中常见的需求，el-select 为下拉多选，默认值不可删除，或者指定值不可删除。 实现效果： el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性，所有明显不支持。 解决思路（从el-select 的角度来考虑，其他组件组合的情况暂不考虑） 想要实现某些选项是不删除，1、需要tag 不可删除，2、options 不可选择 options 不可选择很好实现，只需要给一个disabled属性。tag 不可删除才是关键。下面是我几种解决思路。 1、 watch 进行监听，当操作不可删除的选项时，el-select 绑定的值
vue element-ui select下拉搜索以及多选
最新发布
u011857538的博客
06-19 1158
vue element-ui select下拉搜索以及多选
Element-UI el-select下拉框多选实现全选
一碗清深的博客
11-17 3534
在el-select下拉框中实现多选全选的功能
element-ui——select多选框远端搜索组件封装
我是我
08-15 1135
select远程搜索、支持多选、组件封装
Element——el-select多选器
拾柒唸的博客
08-28 7237
Element的el-select的多选功能详解
一个开源的Vue大屏数据展示组件库(1)
2401_84447233的博客
05-01 509
数据尚未加载完成时，可以显示Loading效果，增强用户体验。Loading…边框均由SVG元素绘制，体积轻量不失真，使用极为方便。你可以使用装饰去点缀你的页面，以增强视觉效果，与边框组件相同，他们也是用SVG元素绘制的。66%基本示例设置一个中心点，若干飞线点，即可得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。增强版飞线图。
下拉选择器多选
gxh0816的博客
11-12 160
这是添加列表,其中活动标签是一个下拉选择器,同时也是多选的.因为后端的标签是字符串类型.所以我们需要将得到的id转换成字符串类型.否则后端不识别 toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。 ...
可多选的级联选择器
czz19910404的博客
06-13 270
业务需求需要使用级联选择器的多选功能，但是使用的UI组件库不支持，在网上寻找类似的也不能完全符合需求，所以自己简单封装了一个组件，主要使用了element-ui中的el-select组件和el-tree组件实现，支持表单校验。组件引用和数据示例如下。
elementui选择器多选时闪_element-ui中select选择器之多选属性multiple的问题？
05-24
这个问题可能是由于使用了...3. 使用 ElementUI 的 Select 组件中的 filterable 属性，让用户可以搜索需要选择的选项，这样就不需要使用多选属性了。 希望这些方法可以帮助你解决问题。如果还有其他疑问，请随时提出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值