探究:Antd table组件用rowSelection时报shiftKey undefined

8 篇文章 0 订阅
6 篇文章 0 订阅

一:多个版本的时候,依赖版本怎么选择?

参考了这片文章:https://juejin.cn/post/6844903981668368392,启发,进一步探究如下:

去查看npm包依赖情况,输入命令:

yarn list 

但是依赖太多,导致前面已经看不到了,所以将所有依赖输出到文件中

yarn list  > echo

右侧为输出的echo文件,可以看到antd-mobile使用的是2.3.4版本,依赖的rc-checkbox版本是2.0.0
在这里插入图片描述
antd使用的是4.16.8版本,依赖的rc-checkbox版本是2.3.02.3.2,左侧可以看到node_modules
在这里插入图片描述
结论:结合参考文章楼主的解释

为了保证依赖关系树中没有大量重复模块,yarn在安装时会做dedupe(去重)操作,它会遍历所有节点,逐个将模块放在根节点下面,也就是当前项目的 node-modules 中。当发现有相同的模块时,会判断当前模块指定的 semver 版本范围是否交集,如果有,则只保留兼容版本,如果没有则在当前的包的 node-modules 下安装。

和实际打印的依赖树情况
2.0.0版本是antd-mobile依赖的rc-checkbox版本;
2.3.2和2.3.0是antd依赖的版本
那么node_modules根目录下的版本2.0.3是基于上面版本的兼容版本;

二、webpack配置resolve.modules使用

 modules: [
     path.resolve(__dirname, "../src"),
     path.resolve(__dirname, "../node_modules"),   
     "node_modules",
   ]

path.resolve(__dirname, "../node_modules")"node_modules的区别是什么??

对于直接声明依赖名的模块,webpack 会类似 Node.js 一样进行路径搜索,搜索 node_modules 目录,这个目录就是使用resolve.modules 字段进行配置的,默认就是:

resolve: {
  modules: ['node_modules'],
},

通常情况下,我们不会调整这个配置,但是如果可以确定项目内所有的第三方依赖模块都是在项目根目录下的 node_modules中的话,那么可以在 node_modules之前配置一个确定的绝对路径:

resolve: {
  modules: [
    path.resolve(__dirname, 'node_modules'), // 指定当前目录下的 node_modules 优先查找
    'node_modules',
  ],
},

这样配置在某种程度上可以简化模块的查找,提升构建速度。

结论

结合上面两点:

  1. 根据npm包依赖规则,node_modules根目录下最终保留的是rc-checkbox的2.0.3的版本,
  2. webpack打包配置使用path.resolve(__dirname, 'node_modules')导致优先查找node_modules根目录下的依赖版本,而不是antd目录下的2.3.0版本;
  3. 版本兼容问题导致Table组件在使用rowSelection的时候报错;
  4. 只保留node_modules使得antd依赖自己目录下的rc-checkbox的版本2.3.0
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用antd table组件进行分页获取数据,需要在表格中设置pagination属性,同时需要在后端接口中实现分页查询功能。 对于跨页多选,antd table提供了rowSelection属性,可以通过设置type为checkbox实现多选,但是默认只能在当前页进行选择,无法跨页选择。 要实现跨页多选,需要自定义rowSelection的selectedRowKeys和onChange方法。具体步骤如下: 1. 在state中定义selectedRowKeys数组,用于保存已选中的行的key。 2. 在rowSelection属性中设置selectedRowKeys为state中定义的selectedRowKeys数组。 3. 在rowSelection属性中定义onChange方法,用于处理选中行的变化。在该方法中,需要使用setState更新state中的selectedRowKeys数组。 4. 在表格的pagination属性中设置onChange方法,用于处理页码变化时清空已选中的行。 以下是示例代码: ``` import React, { Component } from 'react'; import { Table } from 'antd'; class MyTable extends Component { state = { selectedRowKeys: [], // 保存已选中的行的key }; onSelectChange = selectedRowKeys => { // 更新state中的selectedRowKeys数组 this.setState({ selectedRowKeys }); }; onPaginationChange = () => { // 清空已选中的行 this.setState({ selectedRowKeys: [] }); }; render() { const { selectedRowKeys } = this.state; const rowSelection = { type: 'checkbox', selectedRowKeys, onChange: this.onSelectChange, }; return ( <Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={{ onChange: this.onPaginationChange }} /> ); } } ``` 注意,以上代码仅为示例,具体实现需要根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值