Question

在antd表中，在渲染数据时，我可以将一行设为禁用状态。

所以我有一个dataSource，因此在渲染表时，我需要根据dataSource属性使表行被禁用。

在dataSource中有一个enabled属性，如果它为false，则需要使该行成为禁用的CSS类型。

首先，我想到了一个className，但是有没有任何内置的方式，我不想让所选的复选框只是将要禁用的行设置为空。

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table } from "antd";

import "./styles.css";

function App() {
  const dataSource = [
    {
      key: "1",
      name: "Mike",
      age: 32,
      address: "10 Downing Street",
      enabled: true
    },
    {
      key: "2",
      name: "John",
      age: 42,
      address: "10 Downing Street",
      enabled: false
    }
  ];

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age"
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address"
    }
  ];
  return (
    <>
      <Table dataSource={dataSource} columns={columns} />;
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Codesandbox

有什么办法

Answer 1

能够找到解决方案

在App.js中

     <Table dataSource={dataSource} rowClassName={record => !record.enabled && "disabled-row"}
 columns={columns} />;

和css文件中

.disabled-row {
        background-color: #dcdcdc;
    }

基于dataSource属性禁用行-antd表

1 个答案: