vue,element组件（下拉框）间的宽度和本身的宽度

最新推荐文章于 2024-01-18 08:05:08 发布
最新推荐文章于 2024-01-18 08:05:08 发布
阅读量9.1k 收藏 3
点赞数 1
分类专栏： vue element 前端样式 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xy405580364/article/details/103558473
版权
vue 同时被 3 个专栏收录
20 篇文章 0 订阅
订阅专栏
element
11 篇文章 0 订阅
订阅专栏
前端样式
6 篇文章 0 订阅
订阅专栏 
label-width="50px"        距离上一个下拉框的距离
style="width: 125px"      下拉框本身的宽度

在这里插入图片描述

<el-form-item label="机构" label-width="50px">
	<el-select v-model="formInline.institution" placeholder="机构" style="width: 125px">
		<el-option label="全部" value=""></el-option>
		<el-option label="广发电营" value="dy-gf"></el-option>
		<el-option label="信控处" value="xk"></el-option>
		<el-option label="广州电营" value="dy-gz"></el-option>
		<el-option label="客服" value="kf"></el-option>
		<el-option label="授权呼叫中心" value="sq"></el-option>
		<el-option label="资产管理处" value="zc"></el-option>
		<el-option label="上海电营" value="dy-sh"></el-option>
		<el-option label="沈阳电营" value="dy-sy"></el-option>
	</el-select>
</el-form-item>
xy405580364
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
让el-option和el-select宽度保持一致
qq_37635012的博客
04-04 1893
有时候我们用elementUI时会发现，el-option宽度总是达不到100%，就算你给它设置了宽100%一样不生效。如果 el-select 宽度不确定，可以在 focus 时获取 el-select 宽度，赋值给 el-option。原理：DOM挂载完毕后，获取 el-selcet宽度，并赋值给 el-option。
vue组件实践之可搜索下拉框功能
12-29
之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。 效果图： 子组件 DROPDOWN.VUE <template> <div class=vue-dropdown> <div class=cur-name class=isShow click=isShow>{{itemlist.cur.name}}</div> <div class=list-and-search class=isShow?> <div class=search-modu
element select自定义模板 options span宽度设置
five_s的博客
11-10 300
主要是span文本过长，到时下拉框被撑开了。
出现2个滚动条问题
最新发布
qq_42891199的博客
01-18 395
不要给 el-option 的高度设置为 1200px, 太长了, 导致 el-option 的父容器容纳不下 el-option。给 el-option 的高设置为 100%后的效果如下。第二个滚动条是因为 el-option 太长导致的。第一个滚动条是因为 el-tree 太长导致的。
el-select 和 el-option长度和样式修改
m0_61601708的博客
11-27 1236
【代码】el-select 和 el-option长度和样式修改。
el-select 调整宽高
qq_41562817的博客
12-07 3086
二、 高度调整，默认高度为40px。
element ui的el-select框和选项框的宽度设置问题
热门推荐
Beam
04-30 7万+
最终效果图 有数据时： 无数据时： 常见情况-有数据时 代码： <el-select v-model="devType" style="width:100%"> <el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value"></el-op...
设置el-option的宽度和el-select 宽度相同，选项内容超出显示滚动条
吴冬雪的博客
03-16 7938
<!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> </style> <!-- globe css --> <style lang="scss"> .el-select-dropdown{ ...
el-select如何自定义下拉选项框的宽度
博哥的二进制世界
07-30 1万+
el-select如何自定义下拉选项框的宽度背景解决办法 背景 默认情况下，el-select的下拉选项框的宽度会依据选项内容的长度而改变，当选项内容的长度过长的时候，下拉选项框的宽度也会变得很长，甚至可能会超出屏幕宽度，如下图所示： 解决办法 为了解决这一问题，我们可以通过给el-select添加focus事件的监听，当focus之后，动态改变el-option的宽度 <template> <div> <el-select v-model="textCaseType"
vue下拉框宽度的设置
神秘人
02-16 2952
在进行项目调试的时候，发现下拉框选项的宽度不一致，在这里我的需求是想要将el-option和el-select的宽度设置一致。于是找了好多办法，结果发现只需要加一个属性就可以搞定，详情见代码 在select组件里加了 style="width:130px"即可搞定，在这里其实select组件提供的就是el-option和el-select宽度是一致的，但不知道为什么我的不一致，至今没发现原因，对比了代码也没发现。 ...
Web前端-vue的select下拉框宽度的设置
MinggeQingchun的博客
07-13 7719
最近在使用SpringBoot框架做一些前后端分离的项目，但是我也写一部分简单的前端页面，目前使用Vue框架开发前端页面 下班使用vue-element-admin框架开发了一个简单的后台管理系统，在学习开发的过程之中遇到了一个功能 在form表单里面 这个默认的select下拉框宽度的宽度比较淡，看上去不是很好看 这里需要调整成为input输入框一样的长度 需要在select下拉框宽度加上如下属性： style="width:100%" 或者 style="width:200px" 代码
vue组件实现可搜索下拉框扩展
08-27
主要为大家详细介绍了vue组件实现可搜索下拉框的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
浅谈Vue Element中Select下拉框选取值的问题
12-29
一个原生的select的，因为展示效果原因，给删除掉了，忘记保存代码了，现在大家展示使用elementUI的下拉框封装一个组件，供咱们项目中经常调用，减少代码量。 html： 请选择 value-key=mateGroup> 周次 <...
基于vue实现可搜索下拉框定制组件
08-27
主要为大家详细介绍了基于vue实现可搜索下拉框定制组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中使用echarts词云
xy405580364的博客
11-10 5万+
1. 安装 cnpm install echarts-wordcloud 2. 创建模板组件 WordCloudChart <template> <div :id="id" :style="{ height:height,width:width }" /> </template> <script> import echarts from "echarts/lib/echarts"; import resize from "@/m
vue中el-tree增加节点后重新刷新
xy405580364的博客
10-31 2万+
1.树形组件 <el-tree v-if="openPanel" //重加载 :data="data" //树形数据 :props="defaultProps" node-key="id" //默认展开节点 :default-expanded-keys="[-1]" //默认展开节点：-1 @node-click="handleNodeClick">...
element的form表单中输入框、下拉框、treeselect的校验问题
xy405580364的博客
07-09 9387
1. 下拉框校验 当前版本的element对select选择器的验证存在问题：select选了值，关闭弹框，再打开会触发自动校验。 * 目前有两种解决方法: * 1.使用 v-if 控制表单,太消耗性能 * 2.关闭弹框时直接delete选择器校验，下次打开弹框再添加进去 //使用第二种，触发form中的方法addRules(),把对下拉框的校验重新加进去 header openDialog() { 触发form中的方法addRules(),把对下拉框的校验重新加进去 th
vue使用async和await解决请求异步问题，确保请求返回结果再执行下面的代码
xy405580364的博客
06-17 7160
参考解决vue请求异步问题 自己代码 afterRequest(result) { //支持高亮提示，提示标准差远高于平均标准差的坐席组别 //获取每个坐席组的坐席数据 this.getDataEveryRepGroup(result).then(res=>{ const _self = this; //求每个坐席组数据标准差 for (let i = 0; i < this.repGroupData.length; i++) {
vue获取下拉框的宽度和高度
04-20
可以通过DOM API获取下拉框元素的宽度和高度，具体的方法如下： 1. 获取下拉框元素对象，例如： ```javascript var selectElm = document.getElementById('select-id'); // 假设下拉框的ID为select-id ``` 2. 获取下拉框的内容区域，例如： ```javascript var contentElm = selectElm.querySelector('.select-dropdown-content'); ``` 这里假设下拉框的HTML结构如下： ```html <select id="select-id"> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select> ``` 则内容区域可以通过`.select-dropdown-content`选择器获取到，如果是其他的下拉框结构，请根据实际情况修改选择器。 3. 获取内容区域的宽度和高度，例如： ```javascript var width = contentElm.offsetWidth; var height = contentElm.offsetHeight; ``` 这里获取的宽度和高度包括了内容区域的内边距和边框宽度，如果需要获取内容区域的实际宽度和高度，可以使用`contentElm.clientWidth`和`contentElm.clientHeight`属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值