表格内容单/多行展示（三）- antd table有padding值时该如何设置

背景

我的项目中需要实现当表格内容过多时单行/多行展示的效果，之前找到的几种方式应用到我的项目中时都会多多少少出现问题。经过了一段时间的摸索，终于找到了一种使用起来样式不会错乱的方法。做法记录如下。

项目：antd4 + react

解决的问题：

1. 相邻几列都设置省略号展示时，display：-webkit-box；数星星会导致表格布局异常，该行会以一列的形式排布在最左侧；
2. 当表格内容是纯字母数字形式时，word-break：break-all；属性会导致每个字母单独成行并且该列的width变小，但去掉该属性后省略号展示无效；
3. display：-webkit-box；属性与padding冲突，导致表格样式错乱，多行省略号展示的单元格padding-bottom属性失效，表格行分界线上移；
4. 采用antd的API，通过给每个column变量加className的方式添加多行省略号展示的css样式，会导致该列的行高出现误差，并且每个单元格的padding-bottom失效，不满足要求的行高；

思路

将文本内容放到一个 div 标签中，外层包裹 td 。表格的 padding 值绑定在 td 上，单/多行展示的 className 绑定在 div 标签上。

也就是说，渲染后这部分的基本结构为：

<table>
	<tr>
		<td>  <= padding值绑定在这里
			<div class=“multiLine”>表格内容</div>
		</td>
	</tr>
</table>

做法

单行展示示例

jsx文件：

const columns = [
	{
    
    
		key: "name",
		dataIndex: "name",
		title: "名称",
	},
	{
    
    
		key: "productType",
		dataIndex: "productType",
		title: "产品类型",
	}
	.......
];

const dataSource=[
	{
    
    
		key: "1",
		name:"BankBankBank123456789",
		productType:"理财2378927893",
		......
	},
	......
]

<Table className="singleElliTable" dataSource={
    
    dataSource} columns={
    
    columns} />

less文件：

.singleElliTable {
    
    
	table {
    
    
		table-layout: fixed !important;
		word-break: break-all;
	}
	.ant-table-tbody > tr > td {
    
     // 来源于antd的自带样式
	// 如果是只有某一列需要单行展示，可以采用.ant-table-tbody > tr > td:nth-child()这种形式
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

多行展示示例

多行展示时，

• 必须要将表格内容包裹在一个 div 标签里，不然会有样式问题，在 columns 的 render 中进行设置。

jsx文件：

const columns = [
	{
    
    
		key: "name",
		dataIndex: "name",
		title: "名称",
		render: (text) => <div>{
    
    text}</div>, // 这里是必须的
	},
	{
    
    
		key: "productType",
		dataIndex: "productType",
		title: "产品类型",
		render: (text) => <div>{
    
    text}</div>,
	}
	.......
];

const dataSource=[
	{
    
    
		key: "1",
		name:"BankBankBank123456789",
		productType:"理财2378927893",
		......
	},
	......
]

<Table className="multiElliTable" dataSource={
    
    dataSource} columns={
    
    columns} />

less文件：

// 单独设置需要多行展示
@multiLineNum: 2

// 加给需要多行展示的table的类名
.multiElliTable {
    
    
	table {
    
    
		table-layout:fixed !important; // 注意这个属性会使得table按照设定好的width固定展示，不会再被撑开
		word-break: break-all; // 保证纯字母数字也能完全展示

		div {
    
     // 设置给表格内容外层的div的
			.multiElliColumn();
		}
	}
}

.multiElliColumn(){
    
    
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: @multiLineNum;
	-webkit-box-orient: vertical;
	word-break: break-all; // 使连续的字母或数字在换行时拆分
	height: auto;
}