element-plus el-select选择器的那些坑

在使用vue3和element-plus组件库时,遇到下拉框内容超宽的问题。为了解决这个问题,可以设置el-select和el-option的宽度,添加横向滚动条。通过在样式中添加`width:280px`和`max-width:40%`以及修改`overflow`属性,可以实现下拉框的自适应并控制其最大宽度,同时避免影响全局样式。
摘要由CSDN通过智能技术生成

此笔记主要为了记录使用element-plus的选择器遇到的需求,问题。
vue3+element-plus

1、下拉框内容超宽(增加横向滚动条)

问题描述:由于绿色下划线的内容超宽,导致整个下拉框的宽度超过了上方框框的宽度。
在这里插入图片描述解决方案:设置定宽,使下拉框出现横向滚动条
通过 width="280px"给el-select设置宽度。style="width: 280px"给el-option设置宽度

<el-select
  width="280px"
  clearable
  placeholder="请选择仓库"
  v-model="form.storeId"
  @change="selectStore"
>
	 <el-option 
	 		:key="index" 
			:label="item.storeName" 
			:value="item.id" 
			v-for="(item, index) in storeList" 
			style="width: 280px" />
</el-select>

一定要加scoped,不然会影响全局。

<style scoped>
.el-select-dropdown {
	max-width: 40%;
}
.el-select-dropdown__item {
	overflow: visible;
}
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element Plus中,select组件可以用来实现下拉选择功能。根据提供的引用和引用,下面是使用Element Plus的select组件实现下拉选择的基本步骤和常用方法: 1. 首先,在模板中使用`<el-select>`标签来创建一个select组件,设置`v-model`绑定的值和占位符等属性。例如: ```html <template> <el-select v-model="value" class="m-2" placeholder="Select" size="large"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </template> ``` 2. 在脚本中,使用`import`语句引入`ref`函数,并创建一个`value`的响应式数据,用来存储选择的值。还需要创建一个`options`数组,用来存储下拉选项的数据。例如: ```html <script lang="ts" setup> import { ref } from 'vue' const value = ref('') const options = [ { value: 'Option1', label: 'Option1' }, { value: 'Option2', label: 'Option2' }, { value: 'Option3', label: 'Option3' }, { value: 'Option4', label: 'Option4' }, { value: 'Option5', label: 'Option5' } ] </script> ``` 以上就是使用Element Plus的select组件实现下拉选择的基本步骤和常用方法。可以根据具体需求进一步进行样式和功能的定制。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [element Plus Select选择器实现查询搜索 下拉选择](https://blog.csdn.net/weixin_52703987/article/details/131529690)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [详解为element-ui的Select和Cascader添加弹层底部操作按钮](https://download.csdn.net/download/weixin_38544781/12928496)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值