Ant Table 某行某列根據內容改變顏色


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM