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

原创于 2023-11-10 10:34:38 发布 · 538 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

文章讨论了在Vue中使用ElementUI的el-select组件时，如何处理span文本过长导致的下拉框撑开问题，通过CSS样式如white-space,text-overflow和overflow来实现单行显示并处理文本溢出。

部署运行你感兴趣的模型镜像

主要是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;
}