el-select实现与el-option同宽度，且移动端适应自动对齐

最新推荐文章于 2025-03-25 10:29:13 发布

一茗道人nview

最新推荐文章于 2025-03-25 10:29:13 发布

阅读量2.2k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_35901863/article/details/128626585

版权

文章讲述了在ElementUI的el-select组件在PC和移动端共用同一界面时可能出现的option宽度异常和内容隐藏问题，提供了解决方案。主要方法包括修改模板中的el-select和el-option样式，以及在script块中添加setOptionWidth方法动态设置选项宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element组件，el-select下拉框选择，将PC端与移动端共用一个界面，会导致option宽度异常，且居左隐藏了部分下拉框数据，解决办法如下：

其他方法没有粘上来，需要修改：

1、<template>块：


<el-row justify="center" align="middle">
    <el-col :xs="24" :sm="20" :md="20" :lg="18" :xl="18">
              <el-select
                v-model="searchValue"
                placeholder="请输入搜索关键字"
                filterable
                remote
                autofocus
                :trigger-on-focus="false"
                :remote-method="remoteMethod"
                :loading="loading"
                @change="handleSelect"
                @focus="setOptionWidth"
                :popper-append-to-body="false"
                popper-class="music-el-select"
                :style="{ display: 'block' }"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :style="{
                    width: selectOptionWidth
                  }"
                ></el-option>
              </el-select>
          </el-col>
        </el-row>

2、<script>块：

export default {
  name: 'Test',
  data() {
    return {
        selectOptionWidth: '',
    }
  },
  methods: {
    setOptionWidth(event) {
      // 下拉框聚焦，设置弹框的宽度
      this.$nextTick(() => {
        this.selectOptionWidth = event.srcElement.offsetWidth + 'px';
      });
    }
  }
};

3、<style>块：

<style lang="less" scoped>
    /deep/ .music-el-select {
        left: 0 !important;
    }
</style>