使用JS来开发ProComponents的ProTable案例

ProComponents 的 ProTable 组件是基于 React 和 TypeScript 开发的，但也可以在 JavaScript 项目中使用。以下是一个使用 JavaScript 的 ProTable 示例：

import { useState, useRef } from 'react';
import { Button } from 'antd';
import ProTable from '@ant-design/pro-table';

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const dataSource = [
  { key: '1', name: '张三', age: 18, address: '北京市海淀区' },
  { key: '2', name: '李四', age: 22, address: '上海市浦东新区' },
];

const Demo = () => {
  const tableRef = useRef(null);
  const [selectedRows, setSelectedRows] = useState([]);

  const handleClearSelection = () => {
    setSelectedRows([]);
    tableRef.current.clearSelectedRows();
  };

  return (
    <div>
      <Button onClick={handleClearSelection}>清空选中行</Button>
      <ProTable
        rowKey="key"
        columns={columns}
        dataSource={dataSource}
        actionRef={tableRef}
        rowSelection={{
          onChange: (selectedRows) => setSelectedRows(selectedRows),
          selectedRowKeys: selectedRows.map((row) => row.key),
        }}
      />
    </div>
  );
};

export default Demo;

　　在这个示例中，我们使用 useState 和 useRef 来管理状态和引用，而不是使用 TypeScript 中的类型。我们定义了 columns 和 dataSource 数组来配置表格，然后将它们传递给 ProTable

组件。我们还使用 actionRef 属性将表格引用存储在 tableRef 中，以便能够在其他地方操作表格，例如清空选中行。

我们还在表格中启用了行选择功能，并使用 useState 来存储选中的行。在清空按钮的点击事件中，我们调用 setSelectedRows 来清空选中行状态，并通过

tableRef.current.clearSelectedRows() 方法清空表格中的选中行。

希望这个示例能对您有所帮助！如果您还有其他问题，请随时提问。

 

转自：chatGPT