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