Introduction: Basic usage is not emphasized, here in passing. The next direct look at the code. Note: The key code in bold red font
The first example: Cells
In this case, according to antd official website, you can see this sentence: the header only support columns were combined, colSpan column in the set. Table supports row / column were combined and used in the cell properties render colSpan rowSpan or set a value of 0, does not render the table set. Conversion and let us start planted in a span attribute data to facilitate subsequent operations.
import React, { useState, useEffect,useCallback } from 'react';
import './index.less';
import { Modal, Table } from 'antd';
import moment from 'moment';
import { config_discount_list } from '../../../services/api';
function DiscountsDetailModal(props) {
const [tableData, setTableData] = useState([]); // list数据
const [visible,setVisible ] = useState(false);
const [tableColumns,setTableColumns] = useState([]);
const [filterParams, setFilterParams] = useState({}); // 查询表单的参数
// const [updateList, setUpdateList] = useState([]); // 回显
const [serveConfigId, setServeConfigId] = useState(); // 是否修改状态
// const format = 'HH:mm';
// const dateFormat = 'YYYY/MM/DD';
// 后端返回的数据
// [
// {
// dateDiscount: 1,
// endDate: "2019-01-02",
// startDate: "2019-01-01",
// timeData:[
// {
// discountPrice: 1,
// endTime: "21:21:21",
// startTime: "20:20:20",
// timeDiscount: 1,
// },
// {
// discountPrice: 2,
// endTime: "21:21:21",
// startTime: "20:20:20",
// timeDiscount: 2,
// },
// {
// discountPrice: 3,
// endTime: "21:21:21",
// startTime: "20:20:20",
// timeDiscount: 3,
// }
//]
//},
// {
// dateDiscount:. 1,
// endDate: "1111-11-11",
// startDate: "1111-11-11",
// TimeData: [
// {
// discountPrice: 0.012,
// endTime: "00:00:00",
// the startTime: "00:00:00",
// timeDiscount: 2,
//},
// {
// discountPrice: 0.013,
// endTime : "00:00:00",
// startTime: "00:00:00",
// timeDiscount: 3,
//}
//]
// }
//]
// my future operating results of data
// [
// {
// Key: 0,
// DATE: '1111',
// dateDiscount: '0.1',
// createTime: '1111-22222',
// timeDiscount: '0.222 ',
// discountPrice:' 1111 ',
// span: 2, @: 0 not account for the representative line: represents per line,: represents over two lines, and so on,
// here account when two lines, the next line must be empty row, i.e., span: 0
// Similarly here are: 3, then, the following two consecutive must span: 0
//},
// {
// Key:. 1,
// DATE: '222 ',
// dateDiscount:' 0.1 ',
// createTime:' 55555-66666 ',
// timeDiscount:' 0.3333 ',
// discountPrice:' 2222 ',
// span:00,
// },
// {
// key:2,
// date:'3333',
// dateDiscount:'0.1',
// createTime:'77777-88888',
// timeDiscount:'0.4444',
// discountPrice:'3333',
// span:4,
// },
// {
// key:3,
// date:'444444',
// dateDiscount:'0.1',
// createTime:'77777-88888',
// timeDiscount:'0.4444',
// discountPrice:'3333',
// span:0,
// },
// {
// key:4,
// date:'55555',
// dateDiscount:'0.1',
// createTime:'77777-88888',
// timeDiscount:'0.4444',
// discountPrice:'3333',
// span:0,
// },
// {
// key:5,
// date:'66666',
// dateDiscount:'0.1',
// createTime:'77777-88888',
// timeDiscount:'0.4444',
// discountPrice:'3333',
// span:0,
// }
// ]
const requestList = useCallback(async () => {
let res = await config_discount_list({ serveConfigId});
if (res.data.responseCode) return
let responseData = res.data.responseData;
setVisible(true)
let arr = [];
responseData.map(responseDataItem=>{
const len = responseDataItem.timeData.length;
responseDataItem.timeData.map((timeDataItem,index)=>{
arr = [
...arr,
{
time:timeDataItem.startTime+'-'+timeDataItem.endTime,
discountPrice: timeDataItem.discountPrice,
timeDiscount: timeDataItem.timeDiscount,
date:responseDataItem.startDate === '1111-11-11' ? '其他日期' : responseDataItem.startDate+'-'+responseDataItem.endDate,
dateDiscount:responseDataItem.dateDiscount,
span:index === 0 ? len : 0
}
]
return arr
})
return arr
})
const tableData = arr.map((item, index) => {
item.key = index;
return item;
})
setTableData(tableData);
})
useEffect(()=>{
setVisible(props.visible);
setServeConfigId(props.serveConfigId);
}, [props.visible, props.serveConfigId])
useEffect(()=>{
if(serveConfigId && serveConfigId !== -1){
requestList()
}
}, [serveConfigId])
useEffect(()=>{
setTableColumns([
{
title: 'date',
dataIndex The: 'DATE',
key: 'date',
width: 140,
the render: (value, Row, index) => { // cells to be merged, just so disposed on the line. Than the simple official website, however, a start properly handle the span attribute data.
{return // return tags here, for example: return <span title = {value}> {value} </ span>
Children: value,
The props: {rowSpan: row.span},
};
},
},
{
title: 'date discount',
dataIndex The: 'dateDiscount',
Key: 'dateDiscount',
width: 140,
the render: (value, Row) => {
return {
Children: value,
The props: {rowSpan: row.span},
},
} ,
{
title: 'time'
dataIndex: 'createTime',
key: 'createTime',
width: 140
},
{
title: '时间折扣',
dataIndex: 'timeDiscount',
key: 'timeDiscount',
width: 140
},
{
title: '价格(元)',
dataIndex: 'discountPrice',
key: 'discountPrice',
width: 140
}
])
}, [])
const onCancel = () => {
setVisible(false)
props.close(false)
}
return (
<Modal
destroyOnClose={true}
className="discountsDetailModal"
title="优惠详情"
centered
visible={ visible }
onCancel={ onCancel }
okText="确定"
cancelText="取消"
maskClosable={ false }
width={600}
>
<Table columns={tableColumns} dataSource={tableData} bordered />
</Modal>
)
}
export default DiscountsDetailModal;
So far, we have completed the merger column of the table, a new problem is if you need interlaced color display, which can be found interlaced color is not what we want to style.
Please second example below: interlaced color
rowClassNameThis api, to achieve different pattern assignment index determined by parity. rowClassNameIs a function whose argument is the first record, all the data corresponding to this line, a second parameter index, the first few lines corresponds to the own counting table assembly;
There is no simple case of a merged cell:
Direct determination indexparity make different pattern assignment; css then interlace discoloration modified depending className
rowClassName={(record, index) => {
let className = 'odd';
if (index % 2 === 1) className = 'even';
return className;
}}
Complications combined cells:
If you rely on rowClassNamethe built-in indexdoes not work, so this time the need to set its own fakeIndexand a flag to indicate whether this line be merged (I set the count is a sign of how much this row since merged line countencountered normal line, fakeIndexplus 1; if they are merged row, then fakeIndex1 is not added, countminus 1. the reason for this can be done is antd when rendering a table rendered per line, to perform a rowClassNamefunction.
specific implementation code as follows:
first, React Component's constructor which affirms fakeIndexandcount
constructor() {
super();
this.fakeIndex = 0;
this.licensesCount = 1;
}
Then renderrendering <Table/>set inside rowClassNamea function
<The Table
Columns = {} the tableColumns
the dataSource = {} TableData
whether bordered // column borders and shows an outer frame
className = "Table-RESET-Ant"
pagination = {} // pager to false, the reference document pagination or CI, is set false and does not display when paging
scroll = {{y: 300} } // if scrollable form, CI rowClassName = {
Record => {
the let className = 'Ant-table-RESET ODD';
iF (record.span> . 1) {
this.licensesCount = record.span; // initialize to the combined number of rows
}
! IF (record.span == 0) {
className = "RESET ODD-Ant-oddHover Table";
IF (% this.fakeIndex ===. 1 2) {
className = 'RESET-Ant the even-evenHover Table';
}
} else {
if (this.fakeIndex % 2 === 1) {
className = 'reset-ant-table even';
}
}
if (record.span === 0) {
this.licensesCount--
if (this.licensesCount === 1) {
this.fakeIndex++
}
}
if (record.span === 1) {
this.fakeIndex++
}
return className;
}
}
></Table>
className in the odd and even interlaced color can be set, oddHover and evenHover can set style mouse when on the move, while hardly perfect, at least a single solution.
So the way to less also add, for reference:
.reset-ant-table{
.ant-table-tbody{
tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
background-color: #DFE8FF;
}
.oddHover:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td:first-child{
background-color: #FFFFFF;
}
.evenHover:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td:first-child{
background-color: #F0F4FD;
}
.odd{
background-color: #FFFFFF;
}
.even{
background-color: #F0F4FD;
}
}
}
Some examples of other used API
When you look at the official website api, but still do not understand how to use it here to let you cut and paste like, ps: there is a good chestnuts
1. Copy the default settings
2. The table row key values may be a string or a function
<Table
rowKay={(recode, index) => `${recode.id}${index}`}
></Table>
3. onRow usage
Yes, that is the official online copy of this example applies to onRow, onHeaderRow, onCell,onHeaderCell
<The Table
onRow = {the Record => {
return {
onClick: Event => {}, // Click OK
onDoubleClick: (event, val) = > {}, // if the first argument does not satisfy you, you can look at the first two
onContextMenu: Event => {},
the onMouseEnter: Event => {},
onMouseLeave: Event => {},
};
}}
onHeaderRow = {column => {
return {
the onClick: () => {}, // click the header row
};
}}
/>