重点就是 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>,
