表格内容单/多行展示（三）

您所在的位置：网站首页 › word目录怎么多几行删除 › 表格内容单/多行展示（三）

表格内容单/多行展示（三）

2023-03-08 06:26| 来源: 网络整理| 查看: 265

背景

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

项目：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 标签上。

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

key: "productType", dataIndex: "productType", title: "产品类型", } ....... ]; const dataSource=[ { key: "1", name:"BankBankBank123456789", productType:"理财2378927893", ...... }, ...... ] 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) => {text}, // 这里是必须的 }, { key: "productType", dataIndex: "productType", title: "产品类型", render: (text) => {text}, } ....... ]; const dataSource=[ { key: "1", name:"BankBankBank123456789", productType:"理财2378927893", ...... }, ...... ] 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; }

【本文地址】

表格内容单/多行展示（三）

表格内容单/多行展示（三）

今日新闻

推荐新闻