【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.rhkb.cn/news/332656.html

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

相关文章

【MySQL】库的基础操作

&#x1f30e;库的操作 文章目录&#xff1a; 库的操作 创建删除数据库 数据库编码集和校验集 数据库的增删查改       数据库查找       数据库修改 备份和恢复 查看数据库连接情况 总结 前言&#xff1a;   数据库操作是软件开发中不可或缺的一部分&#xff0…

若依框架对于后端返回异常后怎么处理?

1、后端返回自定义异常serviceException 2、触发该异常后返回json数据 因为若依对请求和响应都封装了&#xff0c;所以根据返回值response获取不到Code值但若依提供了一个catch方法用来捕获返回异常的数据 3、处理的方法

如何利用已有数据对模型进行微调

1.langchain整合llm做知识问答 利用LangChain的能力来结合检索和生成&#xff0c;形成一个知识增强的问答系统&#xff08;不涉及对模型的微调&#xff09;&#xff0c;而是利用llm从文档检索到问题解答。 langchain整合llm做知识检索 2.微调llm模型 1、首先是我们的数据集&…

python数据分析——数据可视化(图形绘制)

数据可视化&#xff08;图形绘制基础&#xff09; 前言一、图形绘制基础Matplotlib简介使用过程sin函数示例 二、常用图形绘制折线图的绘制plot示例 散点图的绘制scatter()示例 柱状图的绘制bar示例 箱型图绘制plot.box示例 饼状图的绘制pie示例 三、图形绘制的组合情况多个折线…

HTML静态网页成品作业(HTML+CSS)——宠物狗介绍网页(3个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有3个页面。 二、作品演示 三、代…

HCIP-Datacom-ARST自选题库__BGP判断【20道题】

1.传统的BGP-4只能管理IPV4单播路由信息&#xff0c;MP-BGP为了提供对多种网络层协议的支持&#xff0c;对BGP-4进行了扩展。其中MP-BGP对IPv6单播网络的支持特性称为BGP4&#xff0c;BGP4通过Next Hop属性携带路由下一跳地址信息。 2.BGP4通过Update报文中的Next Hop属性携带…

大模型额外篇章二:基于chalm3或Llama2-7b训练酒店助手模型

文章目录 一、代码部分讲解二、实际部署步骤(CHALM3训练步骤)1)注册AutoDL官网实名认证2)花费额度挑选GPU3)准备实验环境4)开始执行脚本5)从浏览器访问6)可以开始提问7)开始微调模型8)测试训练后的模型三、基于Llama2-7b的训练四、额外补充1)修改参数后2)如果需要访问…

告别红色波浪线:tsconfig.json 配置详解

使用PC端的朋友&#xff0c;请将页面缩小到最小比例&#xff0c;阅读最佳&#xff01; tsconfig.json 文件用于配置 TypeScript 项目的编译选项。如果配不对&#xff0c;就会在项目中显示一波又一波的红色波浪线&#xff0c;警告你这些地方的类型声明存在问题。 一般我们遇到这…

C语言对一阶指针 二阶指针的本质理解

代码&#xff1a; #include <stdio.h>char a 2; char* p &a; char** d &p;int main(){printf("a -> %d, &a -> %p\n", a, &a);printf("*p -> %d, p -> %p, &p -> %p\n", *p, p, &p);printf(&qu…

Java Swing + MySQL图书借阅管理系统

系列文章目录 Java Swing MySQL 图书管理系统 Java Swing MySQL 图书借阅管理系统 文章目录 系列文章目录前言一、项目展示二、部分代码1.Book2.BookDao3.DBUtil4.BookAddInternalFrame5.Login 三、配置 前言 项目是使用Java swing开发&#xff0c;界面设计比较简洁、适合作…

ic基础|时钟篇05:芯片中buffer到底是干嘛的?一文带你了解buffer的作用

大家好&#xff0c;我是数字小熊饼干&#xff0c;一个练习时长两年半的ic打工人。我在两年前通过自学跨行社招加入了IC行业。现在我打算将这两年的工作经验和当初面试时最常问的一些问题进行总结&#xff0c;并通过汇总成文章的形式进行输出&#xff0c;相信无论你是在职的还是…

计算机毕业设计 | SpringBoot招投标 任务发布网站(附源码)

1&#xff0c;绪论 在市场范围内&#xff0c;任务发布网站很受欢迎&#xff0c;有很多开发者以及其他领域的牛人&#xff0c;更倾向于选择工作时间、工作场景更自由的零工市场寻求零散单子来补贴家用。 如今市场上&#xff0c;任务发布网站鱼龙混杂&#xff0c;用户需要找一个…

电机转速计算(基于码盘和IO外部中断)

目录 概述 1 硬件介绍 1.1 整体硬件结构 1.2 模块功能介绍 2 测速框架介绍 2.1 测速原理 2.2 软件框架结构 3 使用STM32Cube配置Project 3.1 准备环境 3.2 配置参数 3.3 生成Project 4 功能实现 4.1 电机控制代码 4.2 测试代码 4.3 速度计算 5 测试 5.1 编写测…

搭建CMS系统

搭建CMS系统 1 介绍 内容管理系统&#xff08;Content Management System&#xff0c;CMS&#xff09;是一种用于管理、发布和修改网站内容的系统。开源的CMS系统有WordPress、帝国CMS等&#xff0c;国产的Halo很不错。 WordPress参考地址 # 官网 https://wordpress.org/# …

OrangePi KunPengPro | 开发板开箱测评之学习与使用

OrangePi KunPengPro | 开发板开箱测评之学习与使用 时间&#xff1a;2024年5月23日20:51:12 文章目录 OrangePi KunPengPro | 开发板开箱测评之学习与使用概述1.参考2.资料、工具3.使用3-1.通过串口登录系统3-2.通过SSH登录系统3-3.安装交叉编译工具链3-4.复制文件到设备3-5.第…

SpringMVC:创建一个简单的SpringMVC框架S

目录 一、框架介绍 两个重要的xml文件 SpringMVC执行流程 二、Vscode搭建SpringMVC框架 1、maven创建webapp原型项目 2、pom.xml下添加springmvc的相关依赖 3、在web.xml配置 4、springmvc.xml的配置 5、编写Controller控制器类 6、 编写JSP界面 7、项目结构图 一…

【除自身以外数组的乘积】python

目录 思路&#xff1a; 代码&#xff1a; 思路&#xff1a; 直接计算前缀乘积&#xff0c;后缀乘积&#xff0c;然后相乘即可 开始我还在想&#xff0c;遍历一次i&#xff0c;怎么能同时计算前缀乘积和后缀乘积&#xff0c;事实上分开计算比较方便。。 代码&#xff1a; cl…

基于SpringBoot和Mybatis实现的留言板案例

目录 一、需求及界面展示 二、准备工作 引入依赖 .yml文件相关配置 数据库数据准备 三、编写后端代码 需求分析 代码结构 Model Mapper Service Controller 前端代码 四、测试 一、需求及界面展示 需求&#xff1a; 1. 输入留言信息&#xff0c;点击提交&…

hubilder Android模拟器华为手机连接不上

APP真机测试注意点&#xff1a; 1. 同一个局域网下 2. 手机连接USB模式&#xff08;华为选择USB配置&#xff1a;音频来源&#xff09; &#xff0c;开发者模式 3. 实在不行重启HBuilderX再运行真机 可是卡在了“正在安装手机端HBuilder调试基座...” 就没反应了&#xff1f;&…

Flask+Vue+MySQL天水麻辣烫管理系统设计与实现(附源码 配置 文档)

背景&#xff1a; 同学找到我期望做一个天水麻辣烫的网页&#xff0c;想复用以前做过的课设&#xff0c;结合他的实际需求&#xff0c;让我们来看看这个系统吧~ 项目功能与使用技术概述&#xff1a; 里面嵌入了6个子系统&#xff0c;其中餐饮系统可以进行餐馆信息添加、修改…