element select自定义模板 options span宽度设置

关注

原创最新推荐文章于 2026-08-29 10:22:26 发布 579 阅读 AI 写同款· GEO 优化 ›

让el-option和el-select宽度保持一致有时候我们用elementUI时会发现，el-option宽度总是达不到100%，就算你给它设置了宽100%一样不生效。如果 el-select 宽度不确定，可以在 focus 时获取 el-select 宽度，赋值给 el-option。原理：DOM挂载完毕后，获取 el-selcet宽度，并赋值给 el-option。阅读详情

主要是span文本过长，到时下拉框被撑开了

<el-select
                v-model="updateList[item.property]"
                clearable
                value-key="xaptVmCode"
                style="width: 100%;"
                filterable
                @change="vmChange"
              >
                <el-option
                  v-for="(vm,iindex) in vmOptions"
                  :key="iindex"
                  :label="vm.xaptVmCode"
                  :value="vm"
                >
                  <span class="spanWidth" style="float: left" :title="vm.xaptVmCode">{{ vm.xaptVmCode }}</span>
                  <span class="spanWidth" style="float: right; color: #8492a6; font-size: 13px" :title="vm.xaptVmDesc">{{ vm.xaptVmDesc }}</span>
                </el-option>
              </el-select>

.spanWidth{
  white-space:nowrap;/*强制单行显示*/
  text-overflow:ellipsis;/*超出部分省略号表示*/
  overflow:hidden;/*超出部分隐藏*/
  width: 260px;/*设置显示的最大宽度*/
  display:inline-block;
}