reactjs - React ant 设计表单元格崩溃问题
问题描述
我将我的反应类型脚本项目用于ant 设计表 我想知道如何像表格一样执行以下图像,我搜索任何教程但没有看到任何内容,任何人都知道如何正确地做到这一点。
谢谢
图片在这里
代码在这里
class App extends React.Component {
columns: any = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
},
{
title: "Tags",
key: "tags",
dataIndex: "tags"
},
{
title: "Action",
key: "action"
}
];
data: any = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"]
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"]
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"]
}
];
render() {
return <Table columns={this.columns} dataSource={this.data} />;
}
}
解决方案
您想在每行中创建 2 个子行,但仅针对某些列。你可以用rowspan
这个。
您可以复制行 ( row1-row1-row2-row2-row3-row3-...
),并将子行值放入其中 ( row1_subrow1-row1_subrow2-row2_subrow1-row2_subrow2-...
),然后rowspan
用于要扩展的列(如图像中的 Section 和 Name ),然后展开奇数行并折叠该列的偶数行.
完整代码:(Codesandbox Demo)
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
let multiRowRender = (value, row, index) => {
const obj = {
children: value,
props: {}
};
if (index % 2 === 0) {
obj.props.rowSpan = 2;
}
if (index % 2 === 1) {
obj.props.rowSpan = 0;
}
return obj;
};
const columns = [
{
title: "Number",
dataIndex: "number"
},
{
title: "Issue",
dataIndex: "issue"
},
{
title: "Name",
dataIndex: "name",
render: multiRowRender
},
{
title: "Section",
dataIndex: "section",
render: multiRowRender
}
];
let data = [
{
key: "1",
name: "John Brown",
issues: [32, 100],
numbers: [18889898989, 545054],
section: "sec 1"
},
{
key: "2",
name: "Jim Green",
issues: [42, 50],
numbers: [18889898888, 1420054],
section: "sec 2"
}
];
let data2 = [];
data.forEach(d => {
data2.push({ ...d, issue: d.issues[0], number: d.numbers[0] });
data2.push({
...d,
issue: d.issues[1],
number: d.numbers[1],
key: d.key + "-row2"
});
});
data = data2;
ReactDOM.render(
<Table columns={columns} dataSource={data} bordered />,
document.getElementById("container")
);
推荐阅读
- python - isinstance() 函数是否不足以检测整数和浮点数?
- javascript - 部分执行查询并返回值jQuery php
- swift - 在我的 Swift 包中使用时没有这样的模块“组合”
- r - 使用 actionButton 在 plotly 条形图和 plotly 柱形图之间切换
- python - 按列分组,但返回数据框作为初始数据框 - 熊猫
- java - 具有多个数组返回的字符串拆分
- arrays - 如果两个数组的内容彼此不同,为什么这两个数组之间的比较不起作用?
- c# - ASP.NET - 无法取消保护 message.State 只有一个回调
- javascript - 如何使 div 在反应中自动滚动(钩子)
- python-3.x - 重新格式化数据帧以显示分组后的序列号和时间差