Visualización de una o varias líneas del contenido de la tabla (3): cómo establecer cuándo la tabla antd tiene un valor de relleno

fondo

En mi proyecto, necesito lograr el efecto de visualización de una sola línea/múltiples líneas cuando hay demasiados contenidos en la tabla. Cuando se apliquen a mi proyecto los diversos métodos que encontré antes, habrá más o menos problemas. Después de un período de tanteo, finalmente encontré una manera de usarlo sin estropear el estilo. La práctica se documenta a continuación.

Proyecto: antd4 + reaccionar

problema resuelto:

1. Cuando varias columnas adyacentes se muestran con puntos suspensivos, muestre: -webkit-box; contar estrellas hará que el diseño de la tabla sea anormal, y la fila se organizará en el extremo izquierdo en forma de columna;
2. Cuando el contenido de la tabla es puramente alfanumérico, el atributo word-break: break-all hará que cada letra forme una línea separada y el ancho de la columna se reducirá, pero la visualización de puntos suspensivos no será válida después de eliminar este atributo;
3. display: -webkit-box; el atributo entra en conflicto con el relleno, lo que da como resultado un estilo de tabla desordenado, el atributo inferior del relleno de celda que se muestra mediante puntos suspensivos de varias líneas no es válido y el límite de la línea de la tabla se mueve;
4. Al usar la API de antd, al agregar className a cada variable de columna para agregar el estilo css que se muestra en varias líneas de puntos suspensivos, se producirá un error en la altura de la fila de la columna y el relleno inferior de cada celda no será válido. y las filas que no cumplan con los requisitos de alta;

tren de pensamiento

Coloque el contenido del texto diven una etiqueta y envuélvalo td. El valor de la tabla paddingestá vinculado a td, y la visualización de una o varias líneas classNameestá vinculada a divla etiqueta.

En otras palabras, la estructura básica de esta parte después del renderizado es:

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

práctica

Ejemplo de visualización de una sola línea

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

menos archivo:

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

Ejemplo de pantalla multilínea

Al mostrar varias líneas,

• El contenido de la tabla debe estar envuelto en una divetiqueta, de lo contrario habrá problemas de estilo, configúrelo en columnsel de .render

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

menos archivo:

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