重点就是 render: (val,record)，这里的val是当前的这个数据，而record是当前行的所有数据
然后可以根据这个数据的值，进行相应的逻辑操作，我这里用的是三木表达式，当然你也可以使用if,else等
import React, {
useState, useEffect } from 'react';
import {
Table} from 'antd';
const [userData, setUserData] = useState("");
const [userCurrentPage, setUserCurrentPage] = useState(1);
const [userPageSize, setUserPageSize] = useState(10);
const [userTotalCount, setUserTotalCount] = useState(0);
const columns = [
{
title: '账号ID',
dataIndex: 'uid',
key: 'uid',
},
{
title: '邮箱地址',
dataIndex: 'email',
key: 'email',
},
{
title: '操作',
dataIndex: 'status',
key: 'status',
render: (val,record) =>
//这里的val就是
val==0?
<a style={
{
color:"#F35E5B"}}
onClick={
() => {
Recoveryuser(record.uid).then(result => {
});
}}
>恢复</a>
:
<a style={
{
color:"red"}}
onClick={
() => {
Disableuser(record.uid).then(result => {
});
}}>撤销</a>
},
];
const getUserList = (params: InfoListParamsType) => {
GrantList({
...params }).then((result: any) => {
if (result.code === 0) {
setUserTotalCount(result.data.totalCount);
setUserCurrentPage(result.data.currentPage);
var datas = result.data.list
setUserData(datas);
} else {
message.error(result.message);
}
});
}
//初始化表格，相当于vue里的created。获取数据只需要执行一次的话，第二个参数为一个空数组
useEffect(() => {
getUserList({
pageNo: userCurrentPage, pageSize: userPageSize } as InfoListParamsType);
}, []);
<Table dataSource={
userData} columns={
columns}
pagination={
{
defaultCurrent: userCurrentPage,
defaultPageSize: userPageSize,
total: userTotalCount,
pageSizeOptions: ["10", "20", "50"],
showTotal: totalCount => `共${
totalCount}条`,
showSizeChanger: true,
onChange: ((page, pageSize) => {
setUserPageSize(pageSize),
getUserList({
pageNo: page, pageSize: pageSize } as InfoListParamsType);
}),
}}>
</Table>,