react+antd表格如何给单元格设置样式？

Question

这是数据 （react的函数式组件）
期望的结果就是 我想判断“是否置顶”如果为1 本身就是个下拉框只有1和2两个选项 就给他加个颜色 onCell方法可以实现 但是加上之后表头就没有内容了 而且我的操作列也消失了 原因就是需要在table上面写上columns={columns} 请教大佬们应该如何做？？？

const columns = [
  {
    align: "center",
    label: "公告标题",
    key: "title",
    dataIndex: "title",
    options: {},
    sort: 2,
    className: "",
  },
  {
    align: "center",
    label: "公告内容",
    key: "content",
    dataIndex: "content",
    options: {},
    sort: 3,
    className: "",
  },
  {
    align: "center",
    label: "是否置顶",
    key: "is_top",
    dataIndex: "is_top",
    // onCell: (record, index) => {
    //   console.log(record, index, "12sdafasf");
    //   if (+record.is_top === 1) {
    //     return { className: "cell-class" };
    //   }
    //   return { className: "" };
    // },
    options: {
      1: "是",
      2: "否",
    },
    sort: 5,
    className: "cell-class ",
  }
];

这是表格渲染的

 {/* table */}
      <Table bordered dataSource={list} rowKey="create_time" loading={loading}>
        {columns.map((item) => {
          return (
            <Column
              title={item.label}
              key={item.key}
              dataIndex={item.dataIndex}
              align={item.align}
              className={item.className}
            />
          );
        })}
        <Column
          title="操作"
          align="center"
          key="action"
          className="cell-class1"
          render={(text, record) => (
            <Space size="middle">
              <Button type="link" onClick={() => edit(record)}>
                编辑
              </Button>
              <Button
                type="link"
                className="delete"
                onClick={() => delMonitor(record)}
              >
                删除
              </Button>
            </Space>
          )}
        />
      </Table>

Answer 1

目前我的解决办法就是 把columns这个数组放到函数组件内部 然后不使用Column组件 直接渲染Table 所有的操作都在columns数组里面操作 具体代码我复制在下面 希望以后刚接手react项目的朋友能用到

// 函数式组件
const Plat = () => {
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editTarget, setEditTarget] = useState({}); // 编辑的数据
  const columns = [
    {
      title: "平台类型",
      label: "平台类型",
      key: "platform",
      dataIndex: "platform",
      options: {
        1: "ADSAAS",
        2: "T-TASK",
      },
      align: "center",
    },
    {
      title: "公告标题",
      align: "center",
      label: "公告标题",
      key: "title",
      dataIndex: "title",
    },
    {
      title: "公告内容",
      align: "center",
      label: "公告内容",
      key: "content",
      dataIndex: "content",
      onCell: () => {
        return {
          style: {
            maxWidth: 200,
            overflow: "hidden",
            whiteSpace: "nowrap",
            textOverflow: "ellipsis",
            cursor: "pointer",
          },
        };
      },
      render: (_, item) => (
        <Tooltip placement="topLeft" title={item?.content || "-"}>
          {item?.content || "-"}
        </Tooltip>
      ),
    },
    {
      title: "公告状态",
      align: "center",
      label: "公告状态",
      key: "status",
      dataIndex: "status",
      options: {
        1: "待发布",
        2: "已发布",
      },
      onCell: (record, index) => {
        if (record.status === "待发布") {
          return { className: "cell-class" };
        }
        return { className: "cell-green" };
      },
    },
    {
      title: "是否置顶",
      align: "center",
      label: "是否置顶",
      key: "is_top",
      dataIndex: "is_top",
      onCell: (record, index) => {
        // console.log(record, index, "12sdafasf");
        if (record.is_top === "是") {
          return { className: "cell-class" };
        }
        return { className: "" };
      },
      options: {
        1: "是",
        2: "否",
      },
    },
    {
      title: "添加时间",
      align: "center",
      label: "添加时间",
      key: "create_time",
      dataIndex: "create",
      options: {},
    },
    {
      title: "操作",
      label: "操作",
      key: "action",
      align: "center",
      render: (record) => (
        <label>
          <Button type="primary" onClick={() => edit(record)}>
            编辑
          </Button>
          <Divider type="vertical" />
          {/* <Button onClick={()=>showModal(record)} > 删除</Button> */}
          <Button type="primary" danger onClick={() => delMonitor(record)}>
            {" "}
            删除
          </Button>
        </label>
      ),
    },
  ];
  let timer = null;
  // mounted
  useEffect(() => {
    getNoticelist();
    return () => {
      clearTimeout(timer);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const getNoticelist = async () => {
    try {
      setLoading(true);
      const res = await $api.getNoticelist({ page: 1, limit: 1000 });
      let data = res;
      data.forEach((element) => {
        element.create = moment(element.create_time * 1000).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        element.is_top = element.is_top === 1 ? "是" : "否";
        element.status = element.status === 1 ? "待发布" : "已发布";
        element.platform = element.platform === 1 ? "ADSAAS" : "T-TASK";
      });
      setList(data);
      timer = setTimeout(() => {
        setLoading(false);
      }, 1000);
    } catch (error) {
      setLoading(false);
      console.log(this.error);
    }
  };

  // 新增
  const showModal = () => {
    setEditTarget({});
    setIsModalVisible(true);
  };
  // 删除
  const delMonitor = (data) => {
    confirm({
      icon: <ExclamationCircleOutlined />,
      content: <span>该操作将删除该公告, 是否继续?</span>,
      onOk: async () => {
        try {
          const res = await $api.deleteRemoveNoticelist({ id: data.id });
          message.success(res.msg);
          getNoticelist();
        } catch (error) {
          message.error(error.msg);
        }
      },
    });
  };
  // 编辑
  const edit = (data) => {
    let editData = JSON.parse(JSON.stringify(data));
    for (const key in editData) {
      if (editData.hasOwnProperty(key)) {
        editData[key] = editData[key].toString();
      }
    }
    setEditTarget(editData);
    setIsModalVisible(true);
  };

  // 接受子组件数据 点击取消的时候关闭弹窗
  const getState = (val) => {
    setIsModalVisible(val);
    // 不知道为什么这个事件就是子传父 刷新接口 新增和删除的时候就实时更新了
    getNoticelist();
  };
  return (
    <div className="nav_contione">
      <div className="header-wrap">
        <Button type="primary" onClick={showModal} className="btn">
          新增公告
        </Button>
      </div>
      <label>
        <Row gutter={16} className="gutter-row">
          <Col md={24}>
            <Card title="首页公告列表" bordered={false}>
              <Table
                bordered
                columns={columns}
                dataSource={list}
                loading={loading}
                rowKey={(record) => record.create_time}
              />
            </Card>
          </Col>
        </Row>
        {/* {isModalVisible && <ModalData  />} */}
      </label>
      {/* model */}
      <PlatModule
        isModalVisible={isModalVisible}
        columns={columns}
        cbState={getState}
        editTarget={editTarget}
      />
    </div>
  );
};

Answer 2

多看看API就可以了，再有一点就是建议把table抽离出来，以后这种表格就可以CV了~【能提效不少】
PS：正在编写回答的时候，你自问自答了~🙃
PS: 基本结构如下：

import React from 'react';
import { Table } from 'antd';

function DataTable(props) {
    const columns = [
      {
        title: '商品种类',
        dataIndex: 'type',
      },
      {
        title: '商品名称',
        dataIndex: 'name',
      },
      {
        title: '商品描述',
        dataIndex: 'detail',
      },
      {
        title: '操作',
        align: 'center',
        fixed: 'right',
        key: 'action',
        width: 200,
        render: (row: any) => (
          ...
        ),
      },
    ];
    return <Table {...props} rowKey="id" columns={ columns } />;
}

export default DataTable;

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。