react项目中，在tab列表上展示某个字段以 数组形式 展示
在做中燃的项目时，遇到了一个需求，就是想要在展示的列表上，把发票展示成多个号码，在一个列里展示。对前端来说用 map，就可以了，需要后台配合，返回一个数组的形式
实例代码1
先看看 ant.design官网里的。
假设后端返回的是data
import { Table, Tag, Space } from 'antd';
const { Column, ColumnGroup } = Table;
const data = [
{
key: '1',
firstName: 'John',
lastName: 'Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
firstName: 'Jim',
lastName: 'Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
firstName: 'Joe',
lastName: 'Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
我们进行render 渲染
ReactDOM.render(
<Table dataSource={data}>
<ColumnGroup title="Name">
<Column title="First Name" dataIndex="firstName" key="firstName" />
<Column title="Last Name" dataIndex="lastName" key="lastName" />
</ColumnGroup>
<Column title="Age" dataIndex="age" key="age" />
<Column title="Address" dataIndex="address" key="address" />
<Column
title="Tags"
dataIndex="tags"
key="tags"
render={tags => (
<>
{tags.map(tag => (
<Tag color="blue" key={tag}>
{tag}
</Tag>
))}
</>
)}
/>
<Column
title="Action"
key="action"
render={(text, record) => (
<Space size="middle">
<a>Invite {record.lastName}</a>
<a>Delete</a>
</Space>
)}
/>
</Table>,
mountNode,
);
主要的就下面的步骤
<Column
title="Tags"
dataIndex="tags"
key="tags"
render={tags => (
<>
{tags.map(tag => (
<Tag color="blue" key={tag}>
{tag}
</Tag>
))}
</>
)}
/>
实例代码2
假设接口返回数据结构
{
"success": 1,
"msg": "获取成功",
"total": 2130,
"limit": 10,
"data": [
{
"id": 40,
"times": [
{
"week": "星期二",
“start": "17:30",
"end": "19:30"
},
{
"week": "星期一",
"start": "13:16",
"end": "14:01"
}
]
},
]
}
那么主要的代码是
render: times => (
<span>
{times.map(c => <div key={c.end}>{c.week} {c.start} {c.end}</div>)}
</span>
)
详细代码
import React, { PureComponent } from "react";
import { findDOMNode } from "react-dom";
import moment from "moment";
import { Link } from "react-router-dom";
import { connect } from "dva";
import styles from "./gradeList.less";
const FormItem = Form.Item;
@Form.create()
class GradeList extends PureComponent {
deleteGrade = id => {
const { dispatch } = this.props;
dispatch({ type: "grade/deleteGrade", payload: { id: id } });
};
queryDeltail = id => {
const { dispatch } = this.props;
dispatch({ type: "grade/detail", payload: { id: id } });
};
handleOk = () => {
const { dispatch } = this.props;
dispatch({ type: "grade/hideModal" });
};
handleCancel = () => {
const { dispatch } = this.props;
dispatch({ type: "grade/hideModal" });
};
onchange = (page, pageSize) => {
const { dispatch, form } = this.props;
form.validateFields((err, values) => {
if (!err) {
dispatch({
type: "grade/fetch",
payload: { page: page, limit: pageSize, ...values }
});
}
});
};
handleSearch = e => {
e.preventDefault();
const { dispatch, form } = this.props;
form.validateFields((err, values) => {
if (!err) {
dispatch({ type: "grade/fetch", payload: { ...values } });
}
});
};
handleFormReset = () => {
const { form } = this.props;
form.resetFields();
};
render() {
const gradeList = this.props.gradeList; // 列表展示
const grade = JSON.stringify(gradeDetails) !== "[]" ? gradeDetails.grade : []; // 等级
const modalVisible = this.props.modalVisible;
const { dispatch } = this.props;
const width = 1200;
const pagination = { // 分页
total: this.props.total,
pageSize: 10,
onChange: this.onchange
};
const columns = [ // 展示某个字段
{
title: "上课时间",
dataIndex: "times",
key: "times",
render: times => (
<span>
{times.map(c => <div key={c.end}>{c.week} {c.start} - {c.end}</div>)}
</span>
)
},
];
return (
<div className={styles.listback}>
<Table
columns={columns}
dataSource={gradeList}
rowKey={record => record.id}
pagination={pagination}
/>
<Modal
width={width}
visible={modalVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}
/>
</div>
);
}
}
function mapStateToProps(state) {
return { ...state.grade };
}
export default connect(mapStateToProps)(GradeList);
实例3
{
title: '发票号码',
align: 'center',
dataIndex: 'invNos', //invoiceNumber
key: 'invNos'
// width: 150,
// render: (value, record) => {
// const { id } = record || {};
// return <Link to={`/fin/invoice/incomingRegister/view/${id}`}>{value}</Link>;
// }
render={invNos => (
<>
{invNos.map(invNo => (
<Tag color="blue" key={invNo}>
{invNo}
</Tag>
))}
</>
)}
},
下边是render展示
<ElSearchTable
id='incomingRegister'
rowKey='id'
tableId='fin_invoice_incomingRegisterList'
onRef={(ref) => (this.tableRef = ref)}
mode={{
proxy: true, // 筛选器
search: true, // searchForm
action: true,
pagination: true, // 分页
descriptions: true, // descriptions
tabs: false
}}
searchFormProps={getTableSearchFormItems()}
columns={getTableColumns({that: this })}
actionButtons={
getTableActionButtons({
handleCreate: this.handleCreate,
handleImport: this.handleImport,
handleExport: this.handleExport
})
}
rowSelectionConfig={{
disabledRowIds: [],
// type: 'checkbox',
type: 'radio',
fixed: false,
// onChange: ({ selectedRowKeys, selectedRows }) => {
// this.setState({
// selectedRowKeys,
// selectedRows
// });
// }
}}
tableProxy={{
request: (paramData) => {
// paramData.orders = [{ asc: false, column: 'createTime' }];
const params = {
orders: [{ asc: false, column: 'createTime' }],
...paramData,
settleEntityId: paramData.settleEntityId?.id,
contactId: paramData.contactId?.id,
// paramData.whId = paramData?.whId?.whId; //需要确定是否多选
// paramData.itemId = paramData?.itemId?.map((x) => x.id); //需要确定是否多选
// paramData.whId = paramData?.whId?.map((x) => x.whId); //需要确定是否多选
...this.handleValidRange(paramData) // 时间处理
};
return service.getList(params);
},
successCallBack: (tableRef) => { },
errCallBack: () => {
console.log('err');
},
props: {
success: 'success',
result: 'data.records',
total: 'data.total'
},
autoLoad: true
}}
/>
这样就可以满足需求了
欢迎提供更好的方法