修改el-select多选时collapse-tags模式下设置宽度，超出...

最新推荐文章于 2024-05-21 23:21:19 发布
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量2.3k 收藏
点赞数 1
分类专栏： elementUI 文章标签： 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Koreyoshi123654/article/details/125588667
版权
修改el-select多选时collapse-tags模式下设置宽度，超出…
::v-deep .select_tags >span >span:first-child .el-select_tags-text{
	max-width: 100px;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
::v-deep .el-select_tags >span >span:first-child .el-tag_close{
	display: inline-block;
	margin-top: -10px;
}

修改下图的样式

在这里插入图片描述

Koreyoshi·
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用vue指令实现max-collapse-tags
weixin_44815800的博客
05-23 1098
使用vue指令实现max-collapse-tags
vue element-ui 在el-tabs组件 最右侧添加按钮和tabs宽度
编写博客，学习交流
01-10 8092
需要在tabs页签切换栏的最右边添加一个按钮 方法一 <div style='position: relative;'> <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> <el-tab-pane label="Tab页签标题1" name="first">Tab页签内容1</el-tab-pane> <el-tab-pa
关于element-ui中开启collapse-tags-tooltip后折叠选项悬浮框样式的设置
aidaima021的博客
02-28 419
同理其中的tag也可以通过.el-popper .el-tag设置。通过设置max-width。
解决vue关于el-tabs标签页pane中图表加载宽度不正常的问题
qq_36022463的博客
01-13 1542
引用： https://blog.csdn.net/qq_36256590/article/details/119906425 https://blog.csdn.net/qq_40542728/article/details/89358065 https://blog.csdn.net/yehaocheng520/article/details/118974615 设置宽度el-tab-pane有一个宽度显示正常，有一个显示的默认宽度 原因是图标在加载时，找不到对应的div大小，所以给了一个默认大小。。使
使用el-tooltip展示el-select多选项collapse-tags collapse-tags-tooltip
zhaowenxue的博客
05-27 5125
使用前提是el-select选择后展示后端返回的数组并且禁用状态下collapse-tags-tooltip失效。而且el-select有宽度高度限制 1.话不多，直接上代码 <el-tooltip class="box-item" effect="dark" :content="(contForm.jdxwList).join(',')"
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-select多选设置collapse-tags属性将它们合并为一段文字展示时，超过显示长度以...省略号显示，且在一行展示
migexiaoliang的博客
11-10 3419
el-select多选设置collapse-tags属性将它们合并为一段文字展示时，超过显示长度以...省略号显示，且在一行展示 想要的展示效果： 样式书写，不在一行时，调节一下下面的参数适合自己的便可以变为一行：
vue自定义组件-下拉框
qq_43223477的博客
01-14 1605
学习目标： 自定义下拉框树结构组件 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、CSDN 技术博客 3 篇 3、 学习的 vlog 视频 1 个
vue+element 多选级联选择器自定义props
Whit3ZzT的博客
05-01 4894
element多选级联选择器及自定义props，自定义标签、值
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 166
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 679
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1130
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 277
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
综合性练习-验证码
cj13106811623的博客
05-15 825
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
前端-移动端布局
Kongfutu的博客
05-21 77
可以在浏览器里打开检查 点击一下移动端按钮 然后选择一下对应的手机型号可以切换到对应的手机端。进阶学习建议 Vue.js 和 微信小程序。如何在PC端模拟移动端设备。
【VueRouter 的基本使用】
2302_76611599的博客
05-17 173
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
.el-select 多选只显示一行
07-28
你可以使用 `el-select` 的 `collapse-tags` 属性来实现多选只显示一行。将该属性设置为 `true`，当选中的选项超过一行时，会自动折叠显示为一个 tag。这样可以限制多选的显示高度，保持只显示一行。 示例代码如下： ```html <el-select multiple collapse-tags v-model="selectedOptions"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> ``` 在上面的示例中，`selectedOptions` 是绑定的选中值数组，`options` 是可选项数组。当选中的选项超过一行时，会以 tag 的形式折叠显示。 你可以根据自己的需求调整 `el-select` 的样式和其他属性来满足你的要求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值