テーブル内容の単一行/複数行表示(3) - antdテーブルにパディング値がある場合の設定方法

バックグラウンド

私のプロジェクトでは、テーブルの内容が多すぎる場合に単一行/複数行表示の効果を実現する必要があるのですが、以前に見つけたいくつかの方法をプロジェクトに適用すると、多かれ少なかれ問題が発生します。しばらく模索した結果、最終的にスタイルを崩さずに使用する方法を見つけました。その実践方法は以下に文書化されています。

プロジェクト: antd4 + 反応

解決された問題:

1. 複数の隣接する列を省略記号で表示する場合、表示: -webkit-box; 星を数えるとテーブルのレイアウトが異常になり、行が列の形で左端に配置されます。
2. テーブルの内容が純粋に英数字である場合、word-break:break-all; 属性により各文字が個別の行を形成し、列の幅が小さくなりますが、この属性を削除すると省略記号の表示が無効になります。
3. 表示: -webkit-box; 属性がパディングと競合するため、表のスタイルが乱れ、複数行の省略記号で表示されるセルの padding-bottom 属性が無効になり、表の行の境界が移動します。
4. antdのAPIを使用し、各列変数に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} />

ファイルが少なくなります:

.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} />

ファイルが少なくなります:

// 单独设置需要多行展示
@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;
}