前端专题

antDesign使用a-table时,设置某列的单元格内容不换

2019-07-31  本文已影响0人  你说你很爱她却没有给她一个家

本次需求:备注列内容不换行【上图为最终完成版】

第一次尝试:

<template slot="remarks" slot-scope="text, record">

     <span  :title="record.remarks" v-if="record.remarks.length >15" >{{ record.remarks.substring(0,15)+'...' }}</span>

    <span v-else-if="record.remarks.length <= 15"  >{{ record.remarks }}</span>

</template>

思路1没什么问题,样式会有问题,可能有其他方式优化:用length判断字符的长度,中英文混输情况下,实际展示内容可见宽度差别太大【如下图】

==================================================================

第二次尝试:

<template slot="remarks" slot-scope="text, record">

                <span style="display: inline-block;text-overflow: ellipsis;overflow: hidden !important;white-space: nowrap;width:250px;">{{ record.remarks }}</span>

</template>

-------------------------------------------------------------------------------------

设置 text-overflow: ellipsis;overflow: hidden; white-space: nowrap;【必须】,用<nobr>标签页不行

此外还要 设置宽度width,宽度还不能是百分比,若设置百分比,什么值都无效,并且会导致显示内容挤掉其他列的情况【如下图】,需要设置为固定的px才能生效

==========================================================================

以上均在 table 的 columns 已设置width 情况下进行:

上一篇 下一篇

猜你喜欢

热点阅读