CSS妙⽤，el-table中字段长度显⽰过长怎么办
  el-table中有些字段的长度太长，例如描述，备注等字段，⼀旦字数超过了列头宽度的限制，就会被挤下另⼀⾏，导致table的每⼀⾏的⾼度不⼀致，看起来很不美观
  查阅官⽅⼿册，其实是有提供⼀个 show-overflow-tooltip 属性的。使⽤了此属性的情况下，能够实现当内容过长隐藏并显⽰ tooltip，显⽰效果如下
  其实挺好看的，但是还是有点美中不⾜，⿏标不能移⼊tooltip进⾏复制，查看过官⽅⼿册中tooltip的属性，原本组件是⽀持的，但是写进el-table的时候不知官⽅处于什么考虑，将enterable默认设置为了false。
  没有选择的余地，业务需求⼜需要，于是也就只能⾃⼰重新仿造写⼀个了。
<el-table>
<el-table-column
label="备注">
<template slot-scope="scope">
<div v-if='w.XXXX && (w.XXXX.length>16)'>
<el-popover title="详细" trigger="hover" placement="top" width="200">
<p>{{ w.XXXX }}</p>
<div slot="reference">
<p size="medium">{{ w.XXXX | XXXX}}</p>
</div>
</el-popover>
</div>
<div v-else>
<span>{{ w.XXXX}}</span>
</div>
</template>
</el-table-column>
</el-table>
  这⾥⽤了el-popover，其实和el-tooltip挺像的，基本⽤法也差不多。想限制的字体长度⾃⼰决定，再搭配上⼀个过滤器。
filters:{
XXXX(value){
if(!value){
return
}else{
if(value.length>16){
var target=value.substr(0,16)+'....'
}else{
target=value
}
return target;
}
},
}
  然后，看图
  ⼤致就这样了，但是⼜觉得不完美，⾸先，不能⾃适应屏幕宽度，js中的字体长度限制的不好还是会出现换⾏的情况，于是，就⼜升级了⼀版
<el-table>
<el-table-column
label="备注">
字符串长度过长<template slot-scope="scope">
<el-popover title="详细" trigger="hover" placement="top" width="200">
<p>{{ w.XXXX }}</p>
<div slot="reference">
<p size="medium" >{{ w.XXXX}}</p>
</div>
</el-popover>
</template>
</el-table-column>
</el-table>
  看出了主要差别了么，主要就是那3句css，总结下来就是不换⾏，超过宽度部分隐藏，⽂字超过宽度显⽰省略符号来代表被修剪的⽂本，代码却少了好多
  果然还是⽼话说的好，能css解决的，就不要js解决。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。