antd vue table表格中rowSelection默认选中下一页同行数据的问题

最新推荐文章于 2024-06-25 11:24:40 发布
最新推荐文章于 2024-06-25 11:24:40 发布
阅读量1.5k 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yrqlyq/article/details/121476897
版权
在Ant Design的表格组件(A-table)中，遇到一个默认选中问题：当设置rowSelection后，滚动加载或切换页面，相同位置的数据会被自动选中。通过添加`rowKey`属性并指定每一行的唯一标识（如`record => record.id`）可以解决此问题，确保每行的正确标识和独立状态。
摘要由CSDN通过智能技术生成

在antd 表格组件中，有一个默认选中功能，叫做rowSelection
在使用中，你选中第一页的第一行数据，滚动加载或者通过别的事件触发加载，第二页的第一行同样会选中

html
<a-table
        :columns="columns"
        :data-source="showList"
        :row-selection="rowSelection"
        :rowKey="record=>record.id"
      />

加rowKey可解决这个问题

YaaLee_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
antd 表格的多选/单选框：rowSelection
汤迷的博客
02-26 7769
获取选中的框{ 1、定义在rowSelection中,然后监听onChange事件，给selectedRowKeys赋值 rowSelection:{type:'radio',onChange: this.selectChange,getCheckboxProps:this.getCheckboxProps,selectedRowKeys:[]} selectChange (...
antd-vue - - - - - row-selection的使用
Dark_programmer的博客
05-08 2415
row-selection的使用
vue3 el-table手动选中某一行、设置默认选中某一行
最新发布
qq_68155756的博客
06-25 1475
选中某一行用的是el-table的toggleRowSelection方法，用来切换某一行的选中状态
antd table rowSelection多选框(可选择列表)
热门推荐
MYG_G
11-11 2万+
可选择列表 如上图，是antd的可选择列表，我们如何将普通列表变成可选择列表呢，这就用到了一个很重要的属性rowSelection。 rowSelection 如下图，rowSelection属性是一个对象，他有很多的参数。 下面是antd官网截图，关于rowSelection的功能配置。 指定可选择列的属性作为key 注意：其中有个很重要的点,就是selectedRowKeys默认取得是列表的第一项，如果你想指定key,就要在table增加rowKey={record => record.id}
vue中 a-table自定义选项row-selection，解决不能选中的问题或者跳转页码时前面勾选的内容会不再勾选的问题。
qq_56938323的博客
08-02 2183
不能进行勾选或第二页勾选后，第一页勾选过的都清除了。
antd vue 表格rowSelection选择框功能的使用
Mr-yang的随笔
11-22 1万+
html部分： <a-table :columns="columns" :data-source="showList" :row-selection="rowSelection" :rowKey="record=>record.id" /> 功能部分： computed: { rowSelection () { return { selectedRowKeys: this.da
vue3.0 自定义复选框 multiselect 组件 支持搜索 table rowselect 选择 :row-selection=“rowSelection“ 翻页多选 翻页回显
sinat_36017053的博客
12-12 1136
select 自定义
antd中table展开行默认展示,且不需要前边的加号操作
01-22
在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={...
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
vue之a-table中实现清空选中的数据
12-13
在Vue框架中，a-table是Ant Design Vue中的一个组件，它用于展示表格数据。在处理表格数据时，我们经常需要对选中的数据进行一些操作，比如清空选中的数据。在本例中，我们将探讨如何在Vue项目中使用a-table组件并...
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
关于ant design vue中设置table组件每页显示的条目数量
upStar1的博客
11-08 3891
最近项目中使用到antv，用到table组件，默认是每页10条，根据需求需要显示每页6条，只需要加入:pagination="{ pageSize: 6 }"就可以了。
AntDesign中Table的选择项居右显示
SJJ980724的博客
08-02 2654
antdesign的Table，rowSelection配置，选项居右
记录ant-design-vue列表的rowSelection动态隐藏的一个骚操作
12-26 4742
有一个列表页，我希望的效果是电脑浏览器中打开，是带有选择框的；而在钉钉中打开只用于查看（由于宽度限制需要隐藏checkbox） 显示checkbox的配置项 :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" 达到效果 不显示checkbox，删除:rowSelection这一个配置项 达到效果 电脑端显示，钉钉端（手机端）不显示，开始踩坑： 1、参考columns配置参数，失败 //...
ant-design-vue ant-table 实现默认选中 且不影响之后的勾选切换
weixin_43666952的博客
04-29 4249
一般情况下都是加载出来列表之后进行全选的操作，这样ant-table官网的一般选中就能满足，可是公司领导给的需求是列表数据一加载就是默认选中的操作。这两个属性结合，默认将数据的ID 数组赋值selectedRowKey 页面加载出来是全选的效果，但是切换点击勾选失效，不能使用。经过多方查找看到网友使用的时候加有这个参数。不然，选中效果不会有。还有这个在合适的位置加。
React Ant Design 的表格默认选中
专注基础架构领域
03-01 4486
在使用 ant design 的表格时候使用默认选中项， 需要配置的 Table 的 rowSelection const rowSelection = { type: 'checkbox', getCheckboxProps(record) { return { defaultChecked: record.id == 0 // 配置默认勾选的列 } } } 可以参考 ant design 的 GitHub 回复链接 ...
Vue + Element UI 表格分页记忆选中
欲变世界，先变其身
12-15 1万+
Vue + Element UI 表格分页记忆选中
element-ui踩坑之表格选中toggleRowSelection问题
weixin_54274691的博客
08-12 109
取消所有选择 this.$refs.multipleTable.clearSelection() 选择当前数据 this.$refs.multipleTable.toggleAllSelection()
antd vue 中TreeSelect异步加载默认选中节点
05-31
要在 antd vue 中的 TreeSelect 组件异步加载并默认选中节点，可以按照以下步骤进行： 1. 在 TreeSelect 组件中，设置 `treeData` 属性为一个空数组，以便在异步加载数据后再进行赋值。 2. 在 TreeSelect 组件中，设置 `loadData` 属性为一个异步加载数据的函数，该函数应该返回一个 Promise 对象，并在 Promise 对象的 resolve 方法中传入需要加载的数据。 3. 在异步加载数据的函数中，可以通过 `selectedKeys` 属性来设置默认选中的节点。例如： ``` loadData: async (treeNode) => { const data = await loadDataFromServer(treeNode); const defaultSelectedKeys = ['1-2']; // 设置默认选中的节点 return data.map(item => { if (defaultSelectedKeys.includes(item.key)) { item.selected = true; // 设置节点为选中状态 } return item; }); } ``` 其中，`defaultSelectedKeys` 数组中存放需要默认选中的节点的 key 值，当加载数据时遍历数据并设置对应节点的 `selected` 属性为 true，即可实现默认选中节点的效果。 注意：在 TreeSelect 组件中，如果需要设置默认选中节点，需要将 `treeCheckable` 属性设置为 true。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值