之前使用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: [], 

}}

Logo

前往低代码交流专区

更多推荐