使用antd中的Form和24 栅格系统进行排版实现响应式布局
import React, { Component } from 'react';
import { Table, Row, Col, Input, DatePicker, Button, Select, Form} from 'antd';
import { getFormatDate } from '../../utils/date';
import '../../styles/Common.css';
import './TradeCircle.css';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
class TradeCircleList extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
const columns = [
{
title: '序号',
dataIndex: 'num',
render: (text, record, index) => {(this.state.currentPageIndex - 1) * 20 + index + 1}
},{
title: '姓名',
dataIndex: 'userName',
key: 'userName',
},{
title: '手机号码',
dataIndex : 'telphone',
key: 'telphone',
},{
title: '生意圈类型',
dataIndex: 'type',
key: 'type',
render: text => {
switch (text) {
case 1:
return 图文;
case 2:
return 视频;
case 3:
return 供需;
case 4:
return 引用;
case 5:
return 想法;
default:
return null;
}
}
},{
title: '内容预览',
dataIndex: 'content',
key: 'content',
render:(text) => {
return (
{text ? (text.length > 10 ? text.substr(0, 10) + "(.....)" : text) : ""}
)
}
},{
title: '发布时间',
dataIndex: 'createDate',
key: 'createDate',
render: CreateDate => ({getFormatDate(CreateDate)})
},{
title: '审核人',
dataIndex: 'reportUserName',
key: 'reportUserName',
},{
title: '审核状态',
dataIndex: 'status',
key: 'status',
render: text => {
switch (text) {
case -1:
return 未通过;
case 0:
return 审核中;
case 1:
return 已通过
default:
return null;
}
}
},{
title: '标签',
dataIndex: 'tags',
key: 'tags',
},{
title: '审核时间',
dataIndex: 'updateDate',
key: 'updateDate',
render: UpdateDate => ({getFormatDate(UpdateDate)})
},{
title: '备注',
dataIndex: 'remark',
key: 'remark',
render:(text) => {
return (
{text ? (text.length > 10 ? text.substr(0 , 10) + "(....)": text) : ""}
)
}
},{
title: '推荐情况',
dataIndex: 'recommendation',
key: 'recommendation',
render: text => {
switch (text) {
case 1:
return 未推荐;
case 2:
return 已推荐待推送;
case 3:
return 已推送;
default:
return null;
}
}
},{
title: '操作',
key: 'action',
fixed: 'right',
width: 110,
render: (text, record) => (
this.showDetailsModal(record)}>详情
{/*
);
}
}
export default Form.create()(TradeCircleList);
效果图：
