element-ui el-select 超出用...表示

如图所示，el-select 组件中当内容过长，想要选择框中的内容省略，用…表示，

.el-input__inner{
    padding: 0 20px 0 10px;
    border: 1px solid #DCDFE6;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    white-space: nowrap;
  }

写了如上代码发现只有在input框失焦的时候生效，看了文档后最终解决了问题，就是在弹框隐藏的时候让input框失焦，this.$refs.country_select.blur(),代码如下

<el-select v-model="countryArea" ref="country_select" @visible-change="countryVisible" @change="nationalStatistics(1)">
 	<el-option
     ...
     >
   </el-option>
 </el-select>

//methods
 countryVisible(e) {
    e == false ? this.$refs.country_select.blur() :''
  },

效果如下：

el-select里 option选项的超出省略只需要限制一下宽度就自动省略了