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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antDesign使用a-table时,设置某列的单元格内容不换行相关的知识,希望对你有一定的参考价值。

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

第一次尝试:

<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 情况下进行:

如何在Delphi 中使用 DevExpressVCL的 CxGrid与CxTreeList,编辑某列后计算另一列的值

如何在Delphi 中使用 DevExpressVCL的 CxGrid与CxTreeList,编辑某列后计算另一列的值:比如 输入 单价,数量,计算金额。

参考:

1、  输入 单价,数量,计算金额   http://www.360doc.com/content/13/1212/19/3827427_336665778.shtml

       重点是:设置Column 的属性值(Properties),响应事件:cxGridDbTableViewColumnPropertiesChange 

      获得列的值的方法是:cxGridDbTableView.Columns[X].EditValue

                 或者通过:GetColumnByFieldName(‘’).Index

以上是关于antDesign使用a-table时,设置某列的单元格内容不换行的主要内容,如果未能解决你的问题,请参考以下文章

C# DataGrid根据某列的内容设置行字体加粗 单元格设置对齐方式

PHPExcel如何设置某列的格式为数值

在MFC中使用listctrl控件,要修改某行某列的值

页面载入时通过获取GridView某行某列的值来控制某一列的控件属性

java 使用POI导出excel模板,如何限制某列的显示格式为文本?比如输入身份证号,默认会用科学计数法

antdesign的表格里嵌套输入框,并对输入框做校验