React+Antd+ProTable 表格跨页选择

原创

起名字好难iii

发布于 2024-01-29 12:48:18

96800

代码可运行

运行总次数：0

代码可运行

需求

需要使用 antd pro的表格进行分页多选
多选的时候, 不能只返回 id , 而是需要返回 id/name/link
回显数据也需要同样的字段返回, 然后进行分页的回显

思路

简单查阅 ant design pro的文档后,可以发现他是有一个多选的属性 rowSelection所以我们就先用这个进行实验

 // ProTable 
 rowSelection={{
   // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
   defaultSelectedRowKeys: [1],
 }}

经过上面的一个代码, 你会发现, 其实整体的效果已经完成了一半了, 因为antd Pro其实已经封装好了一个分页多选, 但是他只能返回 [1,2,,3,,4]这样子的数据结构, 目前和我们想要的数据结构不一样, 所以还需要改造

思路 :

找寻是否有 onChange或者 onSelect这类的操作函数
是否能够通过以上找寻的函数进行重构返回的数据

最后我找寻到的 api 如下

onSelect - 单行选择

onSelectMultiple - 多行选择（使用shift键可以触发多选）

onSelectAll - 全选全不选

onChange - 每次选择行都会触发onChange，并且是后执行。

那这个时候我们就需要想一下跨页选择的逻辑了, 因为按照他目前给的 api我们就只能重构他的返回数据了, 例如说我目前想的一个逻辑

cancelRowKeys取消选中的变量

selectedRowKeys 选中的数据的变量

在onSelect判断一下当前选择的是取消/还是选择 , 然后用一个变量cancelRowKeys进行接受
在onChange中进行数据的处理
cancelRowKeys有值则从已经选中的selectedRowKeys中清除掉当前的cancelRowKeys, 并且清空cancelRowKeys
cancelRowKeys没有值则把数据添加到selectedRowKeys中,并且清除重复的数据

实现

 const [drawerSelectGoods, setDrawerSelectGoods] = useState([]) // 选择的商品
 let cancelRowKeys = [] // 取消选择的项目
 
 const formatList = list => {
   return list.map(item => {
     const commonProps = {
       name: item.goods_name,
       id: item.id,
       type: 'product'
     }
 
     if (list.length === 1) {
       return {
         ...commonProps,
         link: `/pages/index/goodsDetails/goodsDetails?id=${item.id}`,
         display_category_list: false
       }
     } else {
       return {
         ...commonProps,
         link: `/pages/category/categoryList/categoryList`,
         display_category_list: true
       }
     }
   })
 }
 
 <ProTable
   rowSelection={{
     selectedRowKeys: drawerSelectGoods.map(i => i.id), // 回显需要
     onChange: (keys, rows) => {
       let tempList = [...rows, ...drawerSelectGoods.filter(i => !keys.includes(i.id))]
       if (cancelRowKeys.length) {
         setDrawerSelectGoods(formatList(tempList.filter(i => !cancelRowKeys.includes(i.id))))
       } else {
         setDrawerSelectGoods(formatList(tempList))
       }
     },
   
     onSelect: (record, selected) => {
       if (!selected) {
         cancelRowKeys = [record.id]
       }
     }
   }}
 />

回显

 // 选择分类 / 商品 处理
   const handleCascaderChange = async (e, type) => {
     let event
     if (type === 'open') {
       event = e[0]
     } else if (type === 'edit') {
       event = e[0].type
     }
 
     if (event === 'product') {
       triggerGoodsDrawer()
       if (value && value.length) {
         setDrawerSelectGoods(value)
       }
     }
   }

回显在我这里就是比较简单的了, 就是直接获取到数据之后, 进行赋值即可