React 漂亮的table模板

丶酸酸

已于 2022-08-31 11:51:10 修改

阅读量1.5k

点赞数 1

分类专栏： react Ant Design 文章标签： react

于 2020-10-28 10:13:16 首次发布

本文链接：https://blog.csdn.net/a82048195/article/details/109327116

版权

这篇博客展示了如何在React中创建一个漂亮的表格模板，包括展示的表格效果和具体的JS及CSS代码实现。

摘要由CSDN通过智能技术生成

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 titl