【element-plus使用】el-select自定义样式、下拉框选项过长等问题解决

本文介绍: 参考代码：选项的超出部分就会变成…。如果要自定义下拉框的宽度，则可以参考如下代码实现<el–option选项的超出部分就会变成…。参考（里面还有种方法是用横向滚动条，但感觉用户体验会不太好,pass）补充：如果不希望选项超出部分变成…，直接都完整展示每个选项。可以参考下面的写法：（我还没试过；是群里uu提供的）

1、自定义 样式

&lt;template&gt;
  &lt;el-select v-model="value" style="width: 150px"&gt;
    &lt;el-option label="选项一" value="option1"&gt;</el-option&gt;
    <el-option label="选项二" value="option2"&gt;</el-option&gt;
    <el-option label="选项三" value="option3"&gt;</el-option>
  </el-select>
</template>
.el-select-dropdown__item {
  background-color: #e6f7ff;
  color: #333;
}

参考

2、下拉框 宽度自适应或自定义

如果需要使下拉框的宽度和选项框一致，可以设置：:fit-input-width="true"。
参考代码：

<el-select v-model="form.name" clearable filterable :fit-input-width="true">
	<el-option v-for="item in List" :key="item.id" :value="item.value" :title="item.value" />
</el-select>

选项的超出部分就会变成...。

如果要自定义下拉框的宽度，则可以参考如下代码实现

<el-select v-model="value" :popper-append-to-body="false" popper-class="my-select">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :title="item.label"
  >
  </el-option>
</el-select>
 
<style>
.my-select .el-select-dropdown__item {
  width: 300px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>