> 技术文档 > 解决Element UI中el-select下拉框因为选项内容过长导致下拉框宽度显示过长问题_el-select 宽度

解决Element UI中el-select下拉框因为选项内容过长导致下拉框宽度显示过长问题_el-select 宽度

在使用el-select下拉框时,当选项的内容过长就会自动撑开下拉框容器,导致下拉框的宽度显示异常,影响页面美观

解决Element UI中el-select下拉框因为选项内容过长导致下拉框宽度显示过长问题_el-select 宽度
我们更倾向于下拉框的宽度和el-select组件宽度保持一致

解决方法

1、使用el-select组件的popper-append-to-body属性(推荐)

设置el-select组件的属性popper-append-to-body为false:不将弹出框插入至 body 元素

<el-select v-model=\"form.type\" placeholder=\"请选择类型\" style=\"width: 100%\" :popper-append-to-body=\"false\"> <el-option v-for=\"(item,index) in templateList\" :key=\"index\" :label=