Ant Design各个组件的使用，实例
一、Menu的使用
想要达到的效果，点击左边，随时更新右边表格数据。
import React from 'react';
import {Divider, Form, Modal, Select, Table, Tabs, Button, message, Card} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';
import GridContent from "@ant-design/pro-layout/es/GridContent";
import Menu from "antd/es/menu";
import {connect} from "react-redux";
import ProTable from "@ant-design/pro-table";
import {router} from "umi";
const { Option } = Select;
class AllMenu extends React.Component {
constructor(props) {
super(props);
this.state = {
mode: 'inline',
selectKey: '1'
};
}
formRef = React.createRef();
componentDidMount() {
const { dispatch } = this.props;
if (dispatch) {
dispatch({
type: 'equip/getMenuList',
});
dispatch({
type: 'equip/getDatas',
});
}
}
//生成表格数据
renderTableDatas = (datas, groupCode) => {
return datas
.filter(i => i.groupCode === groupCode)
.map(i => {
switch (groupCode) {
case 1:
return {
id: i.id,
name: i.name,
typeId: i.typeId,
typeCode: i.typeCode,
typeName: i.typeName,
model: i.model,
address: i.address,
};
case 50:
return {
id: i.id,
name: i.name,
typeId: i.typeId,
typeName: i.typeName,
typeCode: i.typeCode,
model: i.model,
groupName: i.groupName,
address: i.address.substring(i.address.indexOf(':') + 1),
};
case 51:
return {
id: i.id,
name: i.name,
typeId: i.typeId,
typeName: i.typeName,
typeCode: i.typeCode,
model: i.model,
cameras: JSON.parse(i.config).cameras,
groupName: i.groupName,
address: i.address.substring(i.address.indexOf(':') + 1),
};
}
});
};
//生成表格格式
renderTableCols = (equipTypeCode) => {
let ret = [];
switch (equipTypeCode) {
case 1:
ret = [
{
title: '监测项名称',
dataIndex: 'name',
},
{
title: '传感器类型',
dataIndex: 'typeName',
},
{
title: '传感器型号',
dataIndex: 'model',
},
{
title: '通道号/节点地址',
dataIndex: 'address',
},
{
title: '操作',
dataIndex: 'id',
render: (val, row) => {
return (
<>
this.goInfoPage(3, val, row.typeId, row.typeCode)}>查看
{menuList[item].name} );
};
renderChildrenData = (datas,menuList) =>{
return (Object.keys(menuList).map(group =>(
//左边点击获取的id 与 循环生成的menuId相对比，相同则渲染表格数据
parseInt(this.state.selectKey) === menuList[menu].id?(
[
]}
columns={this.renderTableCols(menuList[menu].id)}
rowSelection={{}}
search={false}
pagination={false}
dataSource={this.renderTableDatas(datas, menuList[menu].id)}
/>
):null
)))
};
render() {
const { datas, menuList} = this.props;
const { mode, selectKey } = this.state;
return (
<>
);
}
}
function mapModelToProps(model) {
return {
datas: model.equip.datas,//表格数据
menuList: model.menuList,//menu数据
};
}
export default connect(mapModelToProps)(AllMenu);
二、ProTable的使用
生成效果图：
[
]}
request={params => getGateUsers(params)}//请求后台
columns={columns}//表格的列表
rowSelection={{}}
search={false}//Protable会自动添加查询表单，如果不需要查询表单,可添加
/>
//如果不想显示某列数据，则可以在columns中添加 hideInTable: true
//如果不想出现在查询表单中，则在columns中添加 hideInSearch：true