[英]Ant design Table configuration
我正在使用 Ant Design Table 組件,但無法找出與根表相比的擴展屬性的不同列結構。
現在,如果您運行下面的代碼,您會發現父列結構和子列結構,或者說擴展表結構是相同的。
我想知道如何使父列結構和子列結構不同。
注意:我不能使用“expandedRowRender”屬性,因為我們不想顯示每一行的擴展屬性。
NAME(Column Name) Age Address
Mick 1 New York No. 1 Lake Park
+ John Brown sr. 2 New York No. 2 Lake Park
Name Age Address
John Brown 1 New York No. 1 Lake Park
Any Name 2 New York No. 2 Lake Park
Amey 3 New York No. 3 Lake Park
您可以看到級別 1 和級別 2 的列結構是相同的,我試圖弄清楚如何提供不同的結構,並且您看到所有行都沒有擴展屬性。 只有第二行具有該屬性。
如果我不能以適當的方式提出問題,Sensior 表示歉意。
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: '12%',
},
{
title: 'Address',
dataIndex: 'address',
width: '30%',
key: 'address',
}
];
const data = [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [
{
key: 11,
aa: 11111,
bb: 22222,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
},
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Brown',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr.',
age: 25,
address: 'London No. 3 Lake Park',
},
{
key: 1312,
name: 'Jimmy Green sr.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
ReactDOM.render(
<Table columns={columns} dataSource={data} />,
document.getElementById('container'),
);
注意:我不能使用“expandedRowRender”屬性,因為我們不想顯示每一行的擴展屬性。
我不得不做類似的事情。 所以我對行使用了 expandRowRender 和不同的類名(基於它們是否有擴展屬性(item.children))並使用 css 屬性來隱藏沒有子行的擴展按鈕。
.class_name_to_hide_expand .ant-table-row-expand-icon-cell .ant-table-row-expand-icon{
opacity: 0;
pointer-events: none
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.