Ant Table 某行某列根据内容改变颜色

最新推荐文章于 2024-07-12 17:56:59 发布

北岭有燕

最新推荐文章于 2024-07-12 17:56:59 发布

阅读量5.3k

点赞数 3

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/qq_41160739/article/details/118765010

版权

react 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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