react+table 删除 修改

安装 antd

// 任务列表
import React from 'react'
import { Table, Space,Button,Modal } from 'antd';

const { confirm } = Modal;


class TaskList extends React.Component {
    constructor(prors){
        super(prors)
    }
    // 删除弹框
    showDeleteConfirm() {
        confirm({
            title: '是否确认删除?',
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            // 点击确认触发
            onOk() {
                console.log('OK');
            },
            // 点击取消触发
            onCancel() {
                console.log('Cancel');
            },
        });
    }

// 编辑
    update(text,record,index){
        console.log(text,record,index)
    }
    // 删除
    del(text,record,index){
        this.showDeleteConfirm()
        console.log(text,record,index)
    }


    render() {
        const columns = [
            {
                title: '任务名称',
                dataIndex: 'task_name',
                width: 150,
            },
            {
                title: '任务类型',
                dataIndex: 'task_type',
                width: 150,
            },
            {
                title: '任务奖励',
                dataIndex: 'task_reward',
            },
            {
                title: '有效期',
                dataIndex: 'task_starttime',
            },
            {
                title: '任务规则',
                dataIndex: 'task_rules',
            },
            {
                title: '状态管理',
                dataIndex: 'task_status',
            },
            {
                title: '操作',
                dataIndex: 'address',
                render: (text, record,index) => (
                    <Space size="middle">
                        <Button size='small' onClick={()=>this.update(text,record,index)} >编辑</Button>
                        <Button type="primary" danger size='small' onClick={()=>this.del(text,record,index)}> 删除</Button>
                    </Space>
                )
            }
        ];

## 数据
        const data = [];
        for (let i = 0; i < 2; i++) {
            data.push({
                id: i,
                task_name: `Edward King ${i}`,
                task_type: 32,
                task_reward: `London, Park Lane no. ${i}`,
                task_starttime:'2',
                task_rules:'3',
                task_status:'4',
            });
        }
        return (
            <div>
##pagination={false} 取消页码 true 显示页码
##dataSource={data} 数据
                <Table pagination={false} columns={columns} dataSource={data}  scroll={{ y: 240 }} />,
            </div>
        )
    }
}

export {TaskList as default}