element-ui select寬度

最近在用vue開發項目時候，用了element-ui，select，出現一個問題，有一個頁面使用了animate.css的zoomIn動畫，而後在一開始渲染時候，頁面呈現

這樣的效果，其實我是想讓下面的下拉框的寬度和上面的同樣，正常狀況下是同樣的，可是我使用了動畫，它在運行動畫時候，select組件的mounted就開始計算select框的寬度，致使了寬度沒有撐開。出現上述現象，查看源碼，找到了

resetInputWidth() 方法，思路來了，只要我在動畫效果結束以後手動觸發這個方法，就能夠解決這個問題。

<el-select ref="selectInput" size="large" v-model="gender" class="el-field-input" placeholder="請選擇">
    <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value">
     </el-option>
</el-select>

獲取它的DOM元素，在mounted時候觸發重繪

mounted() {
     this.$el.addEventListener('animationend', this.resizeSelect);
   },

methods: {
        resizeSelect() {
            this.$refs.selectInput.resetInputWidth();
        },
}

結果如圖：