react使用表格加确认弹框

import React, { Component } from 'react'
import { Button, Table, Modal, Space } from 'antd';
import { getAxios, delAxios } from '../../api/request.js'
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;

export default class Lists extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }
  componentDidMount() {
    this.getData();
  }
  getData() {
    getAxios("/api/user/list").then(res => {
      console.log(res.data.data)
      this.setState({ list: res.data.data })
    })
  }
  delDate(id) {
    delAxios('/api/user/delete').then(res => {
      console.log(res.data);
      this.setState({ list: res.data.data })
    })
  }
  //按钮的oClick事件调用此函数
  showDeleteConfirm = (id) => {
    Modal.confirm({
      title: '确认删除此项目吗?',
      icon: <ExclamationCircleOutlined />,
      content: '',
      okText: '是',
      okType: 'danger',
      cancelText: '否',
      onOk: () => {
        this.handleOk(id)//确认按钮的回调方法,在下面
      }
      ,
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  // /删除的弹出框的确认按钮,执行删除操作
  handleOk = (id) => {
    console.log(id)
    // let params = { id: id };
    // fetchPost(global.constants.deleteProject
    // 【此处填写自己后端接口url】, params).then(
    //   res => this.setData(res)
    // ).catch(e => console.log(e))
    //   .finally(() => {
    //     this.setState({
    //       requestLoading: false
    //     })
    //   });
  };
  render() {
	//表格列的表头
    const columns = [
      {
        title: '姓名',
        dataIndex: 'account',
        key: 'account',
      },
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '密码',
        dataIndex: 'password',
        key: 'password',
      },
      {
        title: 'Action',
        key: 'action',
        dataIndex: 'action',
        render: (text, record) => (
          <Space size="middle">
            <span disabled={record.account === 'admin'}
            //点击出现弹框
              onClick={() => this.showDeleteConfirm(record.id)}
            > 删除</span>
          </Space >
        ),
      },
    ];
    return <div className="lists">
      <Button type="primary">创建管理员</Button>
      //表格
      <Table rowKey="id" dataSource={this.state.list} columns={columns} />;
    </div >
  }
}
// onClick = {() => this.delDate(record.id)}


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值