需求
-
a-table表格中文字字数过长时,需要…显示
文字过长时,可以截取字数进行…展示,但是会存在中文和英文长度不一致的问题,所以采用css的方式截取显示…
<span v-if="!isShowHover" class="text-ellipsis"> { { value }} </span> // 样式部分 .text-ellipsis { max-width: 200px; // 控制最大长度 display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
-
字数过长的时候,不需要显示a-tooltip
采用隐藏的span标签,计算完整显示字数时,所需的高度,当高度大于1行时候用js的方式进行判断是否显示
<!-- 隐藏的span标签 -->
<span :ref="`text${id}`" class="disNone">{
{ value }}</span>
// 使用 getComputedStyle 方法,获取高度, val 为显示几行
getStyle(val