最近笔者刚跳槽,接手一个金融公司的老旧项目,在项目中,遇到了一个奇葩的问题,是基于select选择框的问题,具体听我唠一唠;
具体的问题
由于项目的技术栈采用的是vue+elemenui的形式,所以在ui框架的上面使用的是elemneui,然后在生产上时同组的前端同事没有独一字数长短在展示的时候做限制,由于el-select的options默认展示8个选项,由于在未展示在options的可是区域8条以内,并且字数超机场,所以导致选择区域的options一下被拉框,并且上面的8条由于被拉框后就会变成一个很大空白的选择下拉框;
解决办法
多下拉框的options设置max-width,这样就会对超出的部分以省略号的形式展示;
方案一: 如果想要悬浮展示所有的内容, 这里有一个坑, 如果你使用html5的title属性坐悬浮展示时, 我遇到再 windows上面, 悬浮以后文字特别长的时候, 会无法展示完全,这种你可以用正则替换解决;
方案二:
也可以使用elemenui的el-toolip来设置文字提示, 不过el-tooltip,不过tootip在文案提示时候,如果文案过多,他会很长的展示不会换行,如果想要换行的话,可以使用正则,每隔100个字添加一个<br>换行,具体的正则如下
val.replace(/[^\x00-\xff]/g,"$&\x01").replace(/.{100}\x01?/g,"$&<br/>").replace(/\x01/g,"")