React 漂亮的table模板

table效果：

代码实现：

js代码：

import React from 'react';
import styles from './styles.less';
import { Input, Button, Modal, DatePicker, Table, Divider, Popconfirm, message } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const { TextArea } = Input;
class InformationList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys: [],
            visible: false,
            newVisible: false,
            columns: [
                {
                    title: '标题内容',
                    dataIndex: 'name',
                    ellipsis: true,
                },
                {
                    title: '类型',
                    dataIndex: 'type',
                    filterIcon: filtered  => <DownOutlined  style={{ color: filtered ? '#1890ff' : undefined }} />,
                    filters: [
                        { text: '草稿', value: '草稿' },
                        { text: '已发送', value: '已发送' },
                    ],
                    
                    ellipsis: true,
                    onFilter: (value, record) => record.type.indexOf(value) === 0,
                },
                {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    ellipsis: true,
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    render: (text, record) =>
                        this.state.data.length >= 1 ? (
                            <div>
                                <Button style={{ marginRight: 10 }} onClick={this.showInfo.bind(this, record)}>查看</Button>
                                <Popconfirm title="确定要删除吗?" onConfirm={() => this.handleDelete(record.id)}>
                                    <Button>删除</Button>
                                </Popconfirm>
                            </div>
                        ) : null,
                },
            ],
            data: [],
            infoTitle: '',
            infoContent: '',
            newName: '',
            newContent: '',
            seachInfo: '',
            pagination: {
                current: 1,
                pageSize: 10,
                total: 0,
            },
        }
    }
    //渲染前调用
    componentWillMount() {

    }
    //渲染后调用
    componentDidMount() {
        this.getinfoDatas()
    }
    //获取最近系统通知
    getinfoDatas() {
   		const data = {list:[{ name:1, type:1, createTime: '2022-08-31', status: 1}], pageNum: 1, pageSize: 10, total: 1}
        this.listCallback(data)
    }
    //获取最近系统通知的回调函数
    listCallback(e) {
        let res = e.list;
        res.map((item, index) => {
            if (item.status === 0) {
                item.type = '草稿'
            } else if (item.status === 1) {
                item.type = '已发送'
            } else if (item.status === 2) {
                item.type = '已删除'
            }
        })
        let pagination = this.state.pagination;
        pagination.current = e.page.pageNum;
        pagination.pageSize = e.page.pageSize;
        pagination.total = e.page.total;
        this.setState({
            data: ress,
            pagination: pagination
        })
    }
    //删除信息
    handleDelete() {
        message.success("删除成功");
        this.getinfoDatas()
    }
    //查看信息详情
    showInfo(e) {
        this.setState({
            infoTitle: e.name,
            infoContent: e.text,
            visible: true,
        })
    }
    //点击查看弹框的确认按钮
    handleOk = e => {
        ;
        this.setState({
            visible: false,
        });
    };
    //关闭查看弹框
    handleCancel = e => {
        ;
        this.setState({
            visible: false,
        });
    };
    //点击新增按钮方法
    addInfo() {
        this.setState({
            newVisible: true,
        });
    }
    //新增页面信息名称修改方法
    newInfoName(e) {
        this.setState({
            newName: e.target.value
        })
    }
    //新增页面信息内容修改方法
    newInfoContent(e) {
        this.setState({
            newContent: e.target.value
        })
    }
    //新增信息确定事件
    newInfoOk() {
    //...
        this.setState({
            newVisible: false,
            newName: '',
            newContent: '',
        })
        this.getinfoDatas()
    }
    //关闭新增信息
    newInfoCancel() {
        this.setState({
            newVisible: false
        })
    }

    //搜索框输入
    seachChange(e) {
        this.setState({
            seachInfo: e.target.value
        })
    }
    //查询方法
    seach() {
        this.getinfoDatas()
    }
    //多选
    onSelectChange = selectedRowKeys => {
        this.setState({ selectedRowKeys });
    };
    //翻页
    handleTableChange = (pagination, filters, sorter) => {
     //...  
    }

    render() {
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        return (<React.Fragment>
            <div className={styles.allBox}>
                <div className={styles.inputBox}>
                    <div>
                        信息名称: <Input value={this.state.seachInfo} onChange={this.seachChange.bind(this)} placeholder="请输入" />
                    </div>
                    <div>
                        <Button onClick={this.seach.bind(this)} className={styles.seachBtn} type="primary">查询</Button>
                        <Button onClick={this.addInfo.bind(this)} type="primary" ghost>新建信息</Button>
                    </div>
                </div>
                <Table rowSelection={rowSelection} dataSource={this.state.data} columns={this.state.columns} pagination={this.state.pagination} onChange={this.handleTableChange} />
                <Modal
                    title={this.state.infoTitle}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={null}
                >
                    <p>{this.state.infoContent}</p>
                </Modal>
                <Modal
                    title="新建信息"
                    visible={this.state.newVisible}
                    onOk={this.newInfoOk.bind(this)}
                    onCancel={this.newInfoCancel.bind(this)}
                >
                    <div className={styles.modalInput}>
                        <span className={styles.modalTitle}>信息名称: </span><Input value={this.state.newName} onChange={this.newInfoName.bind(this)} placeholder="请输入" />
                    </div>
                    <div className={styles.modalInput}>
                        <span className={styles.modalTitle}>信息内容: </span><TextArea autoSize={{ minRows: 5, maxRows: 10 }} value={this.state.newContent}
                            onChange={this.newInfoContent.bind(this)} placeholder="请输入" />
                    </div>

                </Modal>
            </div>


        </React.Fragment>)
    }
}
export default InformationList;

css代码：

.allBox {
    width: calc(100%);
    height: 100%;
    float: right;
    background-color: #ffffff;
  
    .inputBox {
      margin-top: 0px;
      width: 100%;
      height: 10%;
      display: flex;
      align-items: center;
      padding: 0 60px;
      background-color: #ffffff;
  
      div {
        width: 25%;
        input {
          width: 70%;
        }
        .seachBtn {
          margin-right: 20px;
        }
      }
    }
  
    .tableBox {
      width: 100%;
      height: 90%;
      padding: 0 45px;
      background-color: #ffffff;
    }
  }
  
  .modalInput {
    display: flex;
    align-items: center;
    margin: 10px auto;
  
    .modalTitle {
      margin-right: 10px;
      width: 20%;
      text-align: right;
    }
  
    :global {
  
      input[type='text'],
      input[type='password'],
      input[type='number'],
      textarea {
        width: 50%;
      }
  
      textarea.ant-input {
        max-width: 50%;
      }
    }
  }