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

思路:focus时获取到select框的宽度,复制个一个变量,将这个宽度绑定到option上

代码:

                   <el-select
                      v-model="item.text"
                      @focus="setOptionWidth">
                      <el-option
                        :style="{width:selectOptionWidth}"
                        v-for="(selectItem, selectIndex) in arr"
                        :key="selectIndex"
                        :label="selectItem.name"
                        :value="selectItem.name">
                      </el-option>
                    </el-select>

 

.

   setOptionWidth(event){
    // 下拉框弹出时,设置弹框的宽度
      this.$nextTick(() => {
        this.selectOptionWidth = event.srcElement.offsetWidth + "px";
      });
      
    }

 

 

 

posted @ 2021-03-01 11:49  古墩古墩  Views(7523)  Comments(0Edit  收藏  举报