背景
我的项目中需要实现当表格内容过多时单行/多行展示的效果,之前找到的几种方式应用到我的项目中时都会多多少少出现问题。经过了一段时间的摸索,终于找到了一种使用起来样式不会错乱的方法。做法记录如下。
项目:antd4 + react
解决的问题:
- 相邻几列都设置省略号展示时,display:-webkit-box;数星星会导致表格布局异常,该行会以一列的形式排布在最左侧;
- 当表格内容是纯字母数字形式时,word-break:break-all;属性会导致每个字母单独成行并且该列的width变小,但去掉该属性后省略号展示无效;
- display:-webkit-box;属性与padding冲突,导致表格样式错乱,多行省略号展示的单元格padding-bottom属性失效,表格行分界线上移;
- 采用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;
}