关于下拉框select的样式改进
之前使用bootstrap-vue的框架,发现改变不了她下拉框的宽度。如图,option宽度过长,UI小姐姐设计的时候,期望option框和select框宽度一致,option文字超出省略号显示,且鼠标移入文字悬浮框显示。所以,我就采用了iview的框架书写。代码如下:HTML: CSS:.opt{width: 210px !important;overfl...
之前使用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: [],
}}
更多推荐
所有评论(0)