el-select组件

最新推荐文章于 2025-09-04 12:14:05 发布

原创最新推荐文章于 2025-09-04 12:14:05 发布 · 419 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

Vue+Element 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何为el-select组件添加横向滚动条，通过设置宽度及使用@focus方法更新下拉框来改善用户体验。同时提供了一个具体的实现示例。

el-select组件添加横向滚动条

在这里插入图片描述
1.给el-select设置宽度，使用@focus方法更新下拉框

<template>
	 <el-select v-model="listQuery.warehouseSpaceCode"
	              @focus="setMinWidth"
	              style="width:100%"
	              @change="selectWarehouseSpace(listQuery.warehouseSpaceCode)"
	              placeholder="请选择所属库区 "  clearable 
	          >
	            <el-option
	              v-for="item in spaceData"
	              :key="item.code"
	              :label="item.warehouseName + '：' + item.name"
	              :value="item.code"
	              :style="{'width': Width + 'px'}"
	            />
	 </el-select>
<template>
 methods: {
// 获取el-select 的宽度 赋值给el-option
	 setMinWidth (val) {
	      this.Width = val.srcElement.clientWidth
	 },
 }
<style>
.el-select-dropdown__item{
  overflow: visible;
}
</style>