在使用Element UI的el-select下拉组件时,如果下拉框中的选项内容过长,确实会导致容器宽度被撑开,影响页面布局。针对这个问题,我提供以下几种解决方案: 设置popper-append-to-body为false并使用自定义CSS样式: 将popper-append-to-body属性设置为false,这样下拉框将不会插入到body元素中,而是相对其父元素进行定位。
el-select文本过长 El-select是Element UI中的一个下拉选择组件,它可以帮助我们在一个可选项列表中选择一个选项。在使用el-select的过程中,有时我们会遇到文本过长的问题,这时候我们就需要对文本进行处理。 在处理el-select文本过长的问题时,我们可以采取以下几种方法: 1. 截取文本 我们可以使用CSS属性`text-...
在使用elementUI Select 选择器时,如果选项的内容长度太长的话会出现容器宽度超过页面宽度的问题,如下图: 这时候如果只是通过 /deep/ 或 ::v-deep 样式穿透的方式对element 的样式重写覆盖的话,发现是不生效的,内联样式也是不生效 ::v-deep .el-select-dropdown{ max-width: 700px; } 解决方法: 1、 eleme...
.corpselect{/deep/.el-select__tags-text{display:inline-block;max-width:108px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}/deep/.el-tag__close.el-icon-close{top:-7px;}} corpselect类名是为防止修改掉所有组件的样式而添加的自定义类名。(为style标签添加scoped没效果) 展示结果如下...
1. 在使用 tag 样式时,需要注意输入框长度限制的设置,以免用户输入过长内容而导致页面显示异常。 2. 对于用户输入的自定义选项,需要在后端进行合法性校验,防止恶意输入或非法字符的添加。 3. tag 样式会增加用户对选项的管理成本,因此在设计时需要权衡用户体验和系统管理成本。 六、结语 el-select 中的 tag 样式...