element-ui 下拉框样式修改

问题描述

当下拉框字段存在超长的情况下增加横向滚动条,效果如图所示:
element-ui 下拉框样式修改_第1张图片

解决办法:

在全局样式中添加如下代码:

  .el-select-dropdown {
    max-width: 330px;
  }
  .el-select-dropdown__item {
    display: inline-block;
  }
  .el-select-dropdown__item span {
    min-width: 330px;
    display: inline-block;
  }

但是这样改的话会影响整个项目中的下拉框样式,如果只想针对某一个下拉框作此修改,就可以用elementUI提供的属性

在这里插入图片描述
将该属性绑定在要修改的下拉框上
在这里插入图片描述
在全局样式中作此声明,就可以实现针对某一个下拉框的样式进行修改啦
element-ui 下拉框样式修改_第2张图片
注意:style不可以绑定scoped,否则无效

参考文献:

https://blog.csdn.net/qq_43563538/article/details/120726091
https://www.bbsmax.com/A/RnJWMy7odq/

你可能感兴趣的:(elementUI,vue.js,elementui,javascript)