antd 分页组件踩坑记录

390 阅读1分钟
  1. total 属性必须设置为 number 类型,否则失效的问题
   total:Number(data.total)
  1. Table 分页和 checkbox 之间的问题 按需加载分页的时候 , checkbox 的状态丢失问题
//  使用 onSelect 和  onSelectAll  把状态保存到 state 中 , 然后作用到 selectedRowKeys 属性上


    // checkbox  相关的事件
    // const [RowKeys, setRowkeys] = useState([])
    const [SelectedBox, setSelectedBox] = useState([])
    const rowSelection = {
        // 指定选中项的key数组
        selectedRowKeys: SelectedBox,
        // selections:true,
        // // 默认勾中的选项
        // defaultSelectedRowKeys:SelectedBox,
        // 选项发生变化时的回调
        onChange: (selectedRowKeys, selectedRows) => {
            // console.log("selectedRowKeys:", selectedRowKeys)
            // console.log("selectedRows:", selectedRows)
            // const RowKeysArr = selectedRows.map((item, i) => {
            //     return item.id
            // })
            // setRowkeys(RowKeysArr)
            //  setExportQuery(exportQuery => {
            //      return {
            //          ...exportQuery,
            //          exportChangeIds: RowKeysArr,
            //      }
            //  })
        },
        onSelect: (record, selected) => {
            if (selected) {
                setSelectedBox(SelectedBox => {
                    return SelectedBox.concat([record.id])
                })
            } else {
                setSelectedBox(SelectedBox => {
                    return SelectedBox.filter(item => item != record.id)
                })
            }
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
            const ids = changeRows.map(item => item.id)
            if (selected) {
                setSelectedBox(SelectedBox => {
                    return SelectedBox.concat(ids)
                })
            } else {
                setSelectedBox(SelectedBox => {
                    return SelectedBox.filter(item => !ids.includes(item))
                })
            }
        }
    };