让element-ui的select下拉框组件的下拉框宽度自适应select宽的宽度

最新推荐文章于 2025-02-08 14:37:05 发布

weixin_48648178

最新推荐文章于 2025-02-08 14:37:05 发布

阅读量1.8k

点赞数

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_48648178/article/details/128161628

版权

//focus时获取到select框的宽度，复制个一个变量，将这个宽度绑定到option上
<el-select
              v-if="item.type === 'Select'"
              v-model.trim="formData[item.prop]"
              :placeholder="'请选择' + item.label"
              size="mini"
              @focus="setOptionWidth"
              @change="item.change && item.change(formData[item.prop])"
              style="display: block; width: 100%"
            >
              <el-option
                :style="{ width: selectOptionWidth }"
                v-for="items in item.options"
                :label="items.label"
                :value="items.value"
                :key="items.value"
              >
                <tootip :text="items.label">{{ items.label }} </tootip>
              </el-option>
            </el-select>
  setOptionWidth(event) {
      this.$nextTick(() => {
        this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
      })
    },