更复杂的分组表头
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 35/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- react, typescript
- Ambito
- frontend
Direzione di ricerca
Inizia con l’esempio riprodotto di Table e le relative colonne annidate che usano colSpan e rowSpan; l’esempio importa ../../assets/index.less. Confronta il rendering previsto e quello effettivo dell’header raggruppato, quindi esamina il percorso di rendering di Table. Il lavoro è completato quando l’esempio produce l’header raggruppato multilivello previsto senza introdurre regressioni negli header più semplici.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
更复杂分组表头的渲染
期望渲染结果：
实际渲染结果：
示例复现的代码
import React from 'react';
import type { TableProps } from 'rc-table';
import Table from 'rc-table';
import '../../assets/index.less';
const columns: TableProps['columns'] = [
{
title: '姓名',
rowSpan: 4,
dataIndex: 'name',
key: 'name',
},
{
title: '出勤',
colSpan: 3,
rowSpan: 3,
children: [
{
title: '出勤',
dataIndex: 'attendance',
key: 'attendance',
},
{
title: '迟到',
dataIndex: 'late',
key: 'late',
},
{
title: '请假',
dataIndex: 'leave',
key: 'leave',
},
],
},
{
title: '其它',
colSpan: 4,
children: [
{
title: '年龄',
dataIndex: 'age',
key: 'age',
rowSpan: 3,
},
{
title: '住址',
colSpan: 3,
children: [
{
title: '街道',
dataIndex: 'street',
key: 'street',
rowSpan: 2,
},
{
title: '小区',
colSpan: 2,
children: [
{
title: '单元',
dataIndex: 'building',
key: 'building',
},
{
title: '门牌',
dataIndex: 'number',
key: 'number',
},
],
},
],
},
],
},
{
title: '技能',
colSpan: 2,
rowSpan: 2,
children: [
{
title: '前端',
dataIndex: 'frontend',
key: 'frontend',
rowSpan: 2,
},
{
title: '后端',
dataIndex: 'backend',
key: 'backend',
rowSpan: 2,
},
],
},
{
title: '公司',
colSpan: 2,
children: [
{
title: '地址',
dataIndex: 'companyAddress',
key: 'companyAddress',
rowSpan: 3,
},
{
title: '名称',
dataIndex: 'companyName',
key: 'companyName',
rowSpan: 3,
},
],
},
{
title: '性别',
dataIndex: 'gender',
key: 'gender',
rowSpan: 4,
},
];
const data = [
{
key: '1',
name: '胡彦斌',
attendance: 20,
late: 0,
leave: 1,
age: 32,
street: '拱墅区和睦街道',
building: 1,
number: 2033,
frontend: 'S',
backend: 'S',
companyAddress: '西湖区湖底公园',
companyName: '湖底有限公司',
gender: '男',
},
{
key: '2',
name: '胡彦祖',
attendance: 20,
late: 0,
leave: 1,
age: 42,
street: '拱墅区和睦街道',
building: 3,
number: 2035,
frontend: 'S',
backend: 'S',
companyAddress: '西湖区湖底公园',
companyName: '湖底有限公司',
gender: '男',
},
];
const Demo = () => (
<div>
<h2>grouping columns specified colSpan & rowSpan</h2>
<Table columns={columns} data={data} className="bordered" />
</div>
);
export default Demo;
不知是否有支持计划，如有可以提交相关 PR
- Lingua principale
- TypeScript
- Stelle
- 1.4k
- Fork
- 619
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Preparare l'ambiente
Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di react-component/table
-
Fixed-header tables force one getBoundingClientRect per column on every mount (ResizeObserver-driven MeasureCell)Forse già presa @rubenmarcus l’ha presa 12 giorni fa. Aperta
Difficoltà 4/5 3-5 giorni Idoneità per principianti 42/100
react-component/table#1507 ·
-
rowExpandable does not work when dataSource has children fieldForse già presa @nrps9909 l’ha presa 46 giorni fa. Aperta
Difficoltà 3/5 1-2 giorni Idoneità per principianti 50/100
react-component/table#1416 ·
-
Difficoltà 5/5 Più di una settimana Idoneità per principianti 30/100
react-component/table#1403 ·
-
Difficoltà 5/5 Più di una settimana Idoneità per principianti 15/100
react-component/table#1269 · 1 commento ·
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 35/100
react-component/table#1257 · 1 reazione ·
Tutte le issue di react-component/table