关于下拉框select的样式改进

之前使用bootstrap-vue的框架，发现改变不了她下拉框的宽度。

如图，option宽度过长，UI小姐姐设计的时候，期望option框和select框宽度一致，option文字超出省略号显示，且鼠标移入文字悬浮框显示。

所以，我就采用了iview的框架书写。

代码如下：

HTML：

 CSS：

.opt{

width: 210px !important;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

.opt:hover{

background-color: #007bff;

color: aliceblue

}

.search-box .select {

margin-right: 20px;

width: 210px;

height: 35px !important;

}

效果如下图：

文字悬浮框截图的时候，显示有点模糊，实在不好意思。

另外补充：

如果想设置下拉框可多选的话，建议使用iview框架。iview框架里面设置好的filterable multiple这两个属性是很好用的。

另外，要传选中的参数给后台的话，设置一个on-change事件给他。

data() {

return {

companyIds: [], 

}}