限制 el-select 和 el-cascader 下拉框宽度
需求
el-select
、el-cascader
等下拉选项字符过多时,下拉框会自动边长,有时甚至会超出屏幕宽度,不美观。
因此,需要限制下拉框宽度,选项内容过长则以省略号显示,鼠标悬浮显示完整内容。
el-select
解决方案
加 `popper-class` 和 `title` ,设定宽度为 0
<el-select
popper-class="my-popper"
v-model="formDefinition[item.id]"
placeholder="请选择(可搜索)"
filterable
clearable
>
<el-option
v-for="opt in clsPropOps"
:title="opt.className"
:key="opt.className"
:label="opt.className"
:value="opt.id"
/>
</el-select>
// scss 代码,不要写在 scoped 内
<style lang="scss">
.my-popper {
width: 0;
}
</style>
el-cascader
解决方案
加 `popper-class`,设定宽度为 0 ,加选项插槽,设置 `title`
<el-cascader
popper-class="cls-attr-cascader"
v-model="clsAttrForm.tag"
:options="addAttrList"
:show-all-levels="true"
clearable
filterable
placeholder="请选择(可搜索)"
:props="{
expandTrigger: 'hover',
emitPath: false
}"
>
<template v-slot:default="{ data }">
<span :title="data.label">{{ data.label }}</span>
</template>
</el-cascader>
// scss 代码,不要写在 scoped 内
<style lang="scss">
.cls-attr-cascader .el-cascader-panel .el-cascader-menu {
width: 0;
}
</style>
参考链接
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/17650848.html
posted on 2023-08-23 13:59 shayloyuki 阅读(1586) 评论(0) 编辑 收藏 举报