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)}
react使用表格加确认弹框
最新推荐文章于 2024-05-28 09:47:47 发布