Keep the width of el-option and el-select consistent

Sometimes when we use elementUI, we will find that the width of el-option is always less than 100%, even if you set it to 100%, it will not take effect. The following is the final rendering:

Principle: After the DOM is mounted, get the width of el-selcet and assign it to el-option.
If the width of el-select is uncertain, you can get the width of el-select when focusing and assign it to el-option.
The following is the Vue3 writing method:

<el-select
           v-model="columnContentList"
           placeholder="请输入关键词"
           ref="columnContentSelect"
           class="column-content-list">
    <el-option
               v-for="item in columnContentListOptions"
               :key="item.value"
               :label="item.label"
               :style="{'width': selectOptionWidth}"
               :value="item.value">
    </el-option>
</el-select>

// 设置选项框与输入框同宽度
const selectOptionWidth = ref('')
const columnContentSelect = ref(null)
onMounted(()=> {
    
    
    nextTick(() => {
    
    
        selectOptionWidth.value = columnContentSelect.value.$el.offsetWidth + "px";
    });
})

The following is the Vue2 writing method:

  <div style="width:100%;">
        <el-select
          v-model.trim="formData.docTag"
          multiple
          filterable
          allow-create
          placeholder="请选择档案标签"
          ref="columnContentSelect"
        >
          <el-option
            v-for="item in doctagList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :style="{ width: selectOptionWidth }"
          >
            <div style="float: left;display: flex;">
              <div
                style="width:0.625rem;height:0.625rem;border-radius:0.3125rem;margin-top:.75rem;margin-right:0.5rem"
                :style="{ background: item.color ? item.color : '#1b9aee' }"
              ></div>
              <div>
                {
    
    {
    
     item.label }}
              </div>
            </div>

            <div style="float: right; color: #8492a6; font-size: 1rem">
              <i
                slot="reference"
                class="el-icon-edit"
                style="margin-right:1.5rem;"
                @click.stop.prevent="editTag(item)"
              ></i>

              <!-- <i class="el-icon-delete" @click.stop.prevent="deleteTag(item)"></i>  -->
            </div>
          </el-option>
        </el-select>
      </div>

<script>
export default{
    
     
     data(){
    
    
      return {
    
    
       selectOptionWidth: "100%"
      }
     },
     mounted() {
    
    
      this.$nextTick(() => {
    
    
        this.selectOptionWidth =
        this.$refs.columnContentSelect.$el.offsetWidth + "px";
    });
  }
}
</script>