如何自定义Ant table rowselection

Question

我用 Ant table 来显示一些信息。

https://codesandbox.io/s/proud-architecture-lsb85?file=/src/index.js

我想自定义行选择复选框的位置。在此应用程序中，您可以按以下顺序看到 header 复选框、姓名、年龄、地址，但我想交换复选框和姓名。

Answer 1

您可以添加checkbox列，自定义render和titleRender到checkbox，然后处理事件。如果遇到性能问题，则必须在列或 evenet 处理程序上添加一些记忆。

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

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`
  });
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      allChecked: false
    };

    this.columns = [
      {
        title: "Name",
        dataIndex: "name"
      },
      {
        dataIndex: "checked",
        title: () => {
          return (
            <Checkbox
              checked={this.state.allChecked}
              onChange={(e) => this.selectAll(e)}
            ></Checkbox>
          );
        },
        render: (text, rec, index) => {
          return (
            <Checkbox
              checked={
                this.state.selectedRowKeys.includes(rec.key) ||
                this.state.allChecked
              }
              onChange={(e) => this.onChange(e, rec)}
            ></Checkbox>
          );
        }
      },
      {
        title: "Age",
        dataIndex: "age"
      },
      {
        title: "Address",
        dataIndex: "address"
      }
    ];
  }

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  onChange = (e, rec) => {
    const checked = e.target.checked;
    if (checked) {
      this.setState((state) => ({
        ...state,
        selectedRowKeys: [...state.selectedRowKeys, rec.key]
      }));
    } else {
      this.setState((state) => ({
        ...state,
        selectedRowKeys: [
          ...state.selectedRowKeys.filter((item) => item !== rec.key)
        ]
      }));
    }
  };

  selectAll = (e) => {
    const checked = e.target.checked;
    if (checked) {
      this.setState((state) => ({
        ...state,
        allChecked: true
      }));
    } else {
      this.setState((state) => ({
        ...state,
        allChecked: false
      }));
    }
  };

  onSelectChange = (selectedRowKeys) => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const { loading, selectedRowKeys } = this.state;

    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <Button
            type="primary"
            onClick={this.start}
            disabled={!hasSelected}
            loading={loading}
          >
            Reload
          </Button>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowKeys.length} items` : ""}
          </span>
        </div>
        <Table columns={this.columns} dataSource={data} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

如何自定义Ant table rowselection

How to customize Ant table rowselection

html

javascript

reactjs

antd