【vue】el-select选择器实现宽度自适应

        

选择器的宽度根据内容长度进行变化

<div class="Space_content"><el-selectv-model="value":placeholder="$t('bot.roommessage')"class="select"size="small"style="margin-right: 10px"@change="selectchange"><template slot="prefix"><span style="margin-right: 10px; font-weight: 600">{{ $t("bot.state") }}:</span><span style="visibility: hidden">{{ (options.find((s) => s.value === value) || {}).label }}</span></template><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</div>
<style lang="scss">.Space_content {.select {min-width: 100px;.el-input__inner {text-align: right;border: none;background-color: transparent;font-weight: 600;padding-left: 15px;padding-right: 25px;}&:hover {background-color: rgba(46, 46, 56, 0.08);border-radius: 5px;cursor: pointer;}.el-icon-arrow-up:before {content: "\e78f";color: #000;}.el-input__suffix {top: -2px;right: 0;}.el-input__prefix {position: relative;left: 0px;box-sizing: border-box;// border: 1px solid #ffffff00;width: auto;padding: 0 30px 0 10px;height: 32px;line-height: 35px;// visibility: hidden;}input {position: absolute;}}.el-input {width: auto !important;}
}
</style>

其中css中的.el-input { width: auto !important; },是因为选择器后面还有一个搜索框,如果不写这个,会出现问题。

其中$t("bot.state")是用国际化的方式呈现的,固定的内容,如果你没有就把他去掉就行,下面是去掉的样子

<div class="Space_content"><el-selectv-model="value":placeholder="$t('bot.roommessage')"class="select"size="small"style="margin-right: 10px"@change="selectchange"><template slot="prefix">{{ (options.find((s) => s.value === value) || {}).label }}</template><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</div>
<style lang="scss">.Space_content {.select {min-width: 100px;.el-input__inner {border: none;background-color: transparent;font-weight: 600;padding-left: 15px;padding-right: 20px;}&:hover {background-color: rgba(46, 46, 56, 0.08);border-radius: 5px;cursor: pointer;}.el-icon-arrow-up:before {content: "\e78f";color: #000;}.el-input__suffix {top: -2px;right: 0;}.el-input__prefix {position: relative;left: 0px;box-sizing: border-box;padding: 0 30px;height: 32px;line-height: 35px;visibility: hidden;}input {position: absolute;}}.el-input {width: auto !important;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/15843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaSE——集合框架二(1/6)-前置知识-可变参数、Collections工具类

目录 可变参数 Collections工具类 Collections的常用静态方法 实例演示 可变参数 可变参数 就是一种特殊形参&#xff0c;定义在方法、构造器的形参列表里&#xff0c;格式是&#xff1a;数据类型...参数名称 可变参数的特点和好处 特点&#xff1a;可以不传数据给它&am…

SQL常用基础语句(一)-- ABCDE开头

AS 将列名从 count(*) 修改为 total select count(*) as total from users where status0 将列名 username 改为 uname&#xff0c; password 改为 upwd select username as uname, password as upwd from users BETWEEN AND 说明&#xff1a;BETWEEN 筛选的是 >value1且 &l…

小程序主体变更是通过迁移吗?是需要2个小程序吗?

小程序迁移变更主体有什么作用&#xff1f;好多朋友都想做小程序迁移变更主体&#xff0c;但是又不太清楚具体有啥用&#xff0c;今天我就来详细说说。首先&#xff0c;小程序迁移变更主体最重要的作用就是可以修改主体。比如你的小程序原来是 A 公司的&#xff0c;现在 A 公司…

操作系统实验四:多线程与信号量编程

操作系统实验上机 更多技术请访问&#xff1a;www.xuanworld.top 部分审核不通过的文章将发至个人博客&#xff1a;www.xuanworld.top 欢迎来52破解论坛阅读帖子&#xff1a;https://www.52pojie.cn/thread-1891208-1-1.html 实验名称实验序号实验日期实验人多线程与信号量…

010-Linux磁盘介绍

文章目录 1、名词 2、类型 3、尺寸 4、接口/协议/总线 5、命名 6、分区方式 MBR分区 GPT分区 1、名词 磁盘是计算机主要的存储介质&#xff0c;可以存储大量的二进制数据&#xff0c;并且断电后也能保持数据不丢失。早期计算机使用的磁盘是软磁盘&#xff08;Floppy D…

基于yolov5和desnet的猫咪识别模型

前言 前段时间给学校的猫咪小程序搭建了识猫模型&#xff0c;可以通过猫咪的照片辨别出是那只猫猫&#xff0c;这里分享下具体的方案&#xff0c;先看效果图&#xff1a; 源代码在文末 模型训练 在训练服务器&#xff08;或你的个人PC&#xff09;上拉取本仓库代码。 图片数…

10款免费黑科技软件,强烈推荐!

1.AI视频生成——巨日禄 网页版https://aitools.jurilu.com/ "巨日禄 "是一款功能强大的文本视频生成器&#xff0c;可以快速将文本内容转换成极具吸引力的视频。操作简单&#xff0c;用户只需输入文字&#xff0c;选择喜欢的样式和模板&#xff0c; “巨日禄”就会…

Day39贪心算法part06

LC738单调递增的数字&#xff08;未掌握&#xff09; 思路分析&#xff1a;一旦出现strNum[i - 1] > strNum[i]的情况&#xff08;非单调递增&#xff09;&#xff0c;首先想让strNum[i - 1]–&#xff0c;然后strNum[i]给为9字符串是不可变的&#xff0c;不可以使用s.char…

树莓派学习笔记——树莓派的三种GPIO编码方式

1、板载编码&#xff08;Board pin numbering&#xff09;: 板载编码是树莓派上的一种GPIO引脚编号方式&#xff0c;它指的是按照引脚在树莓派主板上的物理位置来编号。这种方式对于初学者来说可能比较直观&#xff0c;因为它允许你直接根据引脚在板上的位置来编程。 2、BCM编…

Linux gurb2简介

文章目录 前言一、GRUB 2简介二、GRUB 2相关文件/文件夹2.1 /etc/default/grub文件2.2 /etc/grub.d/文件夹2.3 /boot/grub/grub.cfg文件 三、grubx64.efi参考资料 前言 简单来说&#xff0c;引导加载程序&#xff08;boot loader&#xff09;是计算机启动时运行的第一个软件程…

文章解读与仿真程序复现思路——电力系统保护与控制EI\CSCD\北大核心《计及温控厌氧发酵和阶梯碳交易的农村综合能源低碳经济调度》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

网络域名是什么意思

网络域名&#xff0c;顾名思义&#xff0c;就是网络上的名字&#xff0c;类似于现实中的地址或姓名一样&#xff0c;用来标识网络上的一个或一组计算机或服务器的位置&#xff0c;以及它们的相应服务资源。网络域名是互联网上最基础的基础设施之一&#xff0c;是网络通信的“标…

【mysql】更新操作是如何执行的

现有一张表&#xff0c;建表语句如下&#xff1a; mysql> create table T(ID int primary key, c int);如果要将 ID2 这一行的a字段值加 1&#xff0c;SQL语句会这么写&#xff1a; mysql> update T set c c 1 where ID 2;上面这条sql执行时&#xff0c;分析器会通过词…

Nacos 微服务管理

Nacos 本教程将为您提供Nacos的基本介绍&#xff0c;并带您完成Nacos的安装、服务注册与发现、配置管理等功能。在这个过程中&#xff0c;您将学到如何使用Nacos进行微服务管理。下方是官方文档&#xff1a; Nacos官方文档 1. Nacos 简介 Nacos&#xff08;Naming and Confi…

操作符详解(上)(新手向)

操作符详解&#xff08;上&#xff09; 一&#xff0c;算术操作符&#xff08;双目操作符&#xff09;1:‘’,‘-’,‘*’2&#xff1a;‘/’&#xff0c;‘%’ 一&#xff0c;单目操作符1:‘’,‘-’2&#xff1a;‘!’3&#xff1a;‘&’4&#xff1a;‘*’5&#xff1a;…

linux 排查java内存溢出(持续更新中)

场景 tone.jar 启动后内存溢出,假设pid 为48044 排查 1.确定java程序的pid(进程id) ps 或 jps 都可以 ps -ef | grep tone jps -l 2.查看堆栈信息 jmap -heap 48044 3.查看对象的实例数量显示前30 jmap -histo:live 48044 | head -n 30 4.查看线程状态 jstack 48044

Spring 事件监听

参考&#xff1a;Spring事件监听流程分析【源码浅析】_private void processbean(final string beanname, fi-CSDN博客 一、简介 Spring早期通过实现ApplicationListener接口定义监听事件&#xff0c;Spring 4.2开始通过EventListener注解实现监听事件 FunctionalInterface p…

Rustdesk客户端源码编译

1.安装VCPKG windows平台vcpkg安装-CSDN博客 2.使用VCPKG安装: windows平台vcpkg安装-CSDN博客 配置VCPKG_ROOT环境变量: 安装静态库: ./vcpkg install libvpx:x64-windows-static libyuv:x64-windows-static opus:x64-windows-static aom:x64-windows-static 静态库安装成…

【C语言深度解剖】(15):动态内存管理和柔性数组

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《C语言深度解剖》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多C语言深度解剖点击专栏链接查看&…

I.MX6ULL的官方 SDK 移植实验

系列文章目录 I.MX6ULL的官方 SDK 移植实验 I.MX6ULL的官方 SDK 移植实验 系列文章目录一、前言二、I.MX6ULL 官方 SDK 包简介三、硬件原理图四、试验程序编写4.1 SDK 文件移植4.2 创建 cc.h 文件4.3 编写实验代码 五、编译下载验证5.1编写 Makefile 和链接脚本5.2编译下载 一、…