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 标签:const,name,清空,JS,key,ProTable,ProComponents,setSelectedRows From: https://www.cnblogs.com/wwssgg/p/18009435