el-select如何自定义下拉选项框的宽度

背景
解决办法

背景

默认情况下，el-select的下拉选项框的宽度会依据选项内容的长度而改变，当选项内容的长度过长的时候，下拉选项框的宽度也会变得很长，甚至可能会超出屏幕宽度，如下图所示：

解决办法

为了解决这一问题，我们可以通过给el-select添加focus事件的监听，当focus之后，动态改变el-option的宽度

<template><div><el-select v-model="textCaseType" placeholder="请选择语料素材类型" class="text-case-type-select" @focus="setOptionWidth"><el-optionv-for="item in textCaseTypeOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></div>
</template><script>
export default {name: 'CustomizeCreateVideo',components: {},props: {},data() {return {textCase: null,textCaseOptions: [{voice: 'aixia',label: 'aaaaaaaaaaaaaaaaaaaaaaaaasssssssssssssssssssssssssssssssssssssssqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqffffffffffffffffffffff',speechRate: -146,pitchRate: -7,volume: 80,}, {voice: 'xiaoxian',label: 'aaaaaaaaaaaaaaaaaaaaaaaaasssssssssssssssssssssssssssssssssssssssqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqffffffffffffffffffffff',speechRate: -135,pitchRate: 5,volume: 70,}, {voice: 'maoxiaomei',label: 'a啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',speechRate: -125,pitchRate: 5,volume: 80,}, {voice: 'stanley',label: 'Stanley-沉稳男声',speechRate: -80,pitchRate: 10,volume: 80,}, {voice: 'ailun',label: '艾伦-悬疑解说',speechRate: -100,pitchRate: 3,volume: 80,}],selectOptionWidth: null,};},created() {},methods: {// 下拉框弹出时，设置弹框的宽度setOptionWidth(event){this.$nextTick(() => {this.selectOptionWidth = event.srcElement.offsetWidth + "px";}); }},
};
</script>

el-select如何自定义下拉选项框的宽度相关推荐

微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
java select 下拉选项框option定位_java select 下拉选项框opt
java select 下拉选项框opt [2021-02-05 09:44:01] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace( ...
jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
微信小程序下拉选项框
效果图 test.js /*** 页面的初始数据*/data: {shows: false, //控制下拉列表的显示隐藏,false隐藏.true显示selectDatas: ['消费账户', '平台 ...
QT_下拉选项框_Combo Box_使用
添加选项: 第一种:UI界面静态添加如下第二种:代码添加:如下 1.在mainwindow.h头文件中添加创建用函数 2.定义函数 void MainWindow::add_combobox(vo ...
微信小程序自定义下拉选择框与分页加载--自用【随笔】
效果图展示下拉加载上拉加载编码实现 wxml  <view><vie ...
[Ext JS]3.2.3 下拉选项框 Combobox
Combobox 的介绍 Combobox , 翻译过来是组合框, 也称为下拉框. 该组件类用于创建下拉单选项组件进行选值.对应的类是:Ext.form.field.ComboBox. Combobo ...
前端：下拉选项框及文本框的实现
标签介绍 form标签:用于表单类型的标签. select标签:一般和form标签连用,实现下拉框作用. option标签:一般要嵌套在select标签里面,用于实现选项. textarea标签:用来 ...
下拉选项框选中之后，通过ajax请求服务器，填充页面其他元素的value值
一.背景在后台添加产品,有一些东西需要提前在数据库获取,此时,运营显然是不知道该如何操作的,我们需要做的就是方面运营人员经营后台,把需要用到的字段直接查出来,显示在页面上. 如图: 这是需求图二. ...

el-select如何自定义下拉选项框的宽度

el-select如何自定义下拉选项框的宽度

背景

解决办法

el-select如何自定义下拉选项框的宽度相关推荐

最新文章

热门文章