Ant design table实现单选和点击行选中

最新推荐文章于 2024-05-29 14:22:08 发布

阿炜死了

最新推荐文章于 2024-05-29 14:22:08 发布

阅读量2.7k

点赞数

文章标签： reactjs antd table 表格单选表格点击行选中

本文链接：https://blog.csdn.net/xzwwjl1314/article/details/132717519

版权

实现单选

Antd table实现单选非常方便只需要在rowSelection属性里添加type: radio即可。
在这里插入图片描述

实现点击行选中

需要用到onRow属性
在这里插入图片描述

在onClick事件里面手动设置selectRowKey，跟Table onChange事件一样

onRow={(record) => ({
	onClick: () => {
		console.log(record)
		setSelectedRowKeys([record.docId])
	}
})}

要注意的是selectRowKeys是一个数组，赋值的时候需要变成数组

完整配置如下：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿炜死了

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ant design table实现单选和点击行选中

Antd table实现单选非常方便只需要在。是一个数组，赋值的时候需要变成数组。
复制链接

扫一扫

Ant Design Vue 给table表格行加点击事件

2401_84447362的博客

04-28

750

customRow 用法适用于customRowcustomCell。遵循语法。return {xxx… //属性onClick: (event) => {}, // 点击行onMouseenter: (event) => {}, // 鼠标移入行}}return {onClick: () => {}, // 点击表头行}}/>但是很多小伙伴可能不会使用这种语法，或者一用就报错，跟我刚开始用一样，下面我们会介绍另一种方法：正题。

vue用ant design中table表格,点击某行时触发的事件操作

01-18

使用customRow 设置行属性，写对应事件 ...补充知识：Ant-Design-Vue table 合并单元格，并且添加点击事件点击行，有一个customRow。可以配置点击事件。单元格的自定义分为两种方式。一种是：通过tem

参与评论您还未登录，请先登录后发表或查看评论

antd table列选中效果实现

花姐夫JUN的博客

05-29

1027

开发中有一个需要呈现不同时间点各个气象要素的值需求，我觉得一个table可以实现这类数据的展示，只是因为时间点时关注的重点，所以需要列选中效果，清晰的展示时间点下的要素数据。我选择的是antd的table组件，这个组件没有列选中的效果，所以还是需要自己动手丰衣足食，改造一下。这个功能的难点在于列选中效果，我们需要给他一个背景加上边框，虽然antd的table没有列选中效果，但是它提供了customCell，customHeaderCell，我们可以根据这些回调函数的特点灵活使用实现列选中效果。效果

ant table 点击当前行实现单选/多选和高亮

weixin_47180815的博客

09-15

1568

多选 <template> <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :custom-row="customRow" > <template #name="{ text }"> <a>{{ text }}</a> </template> </a-t

Ant design vue table 单击行选中勾选checkbox

热门推荐

double_hll123的博客

09-05

1万+

最近了解Ant design 设计table 单击行选中checkedbox功能，相比于element的 @row-click 再触发toggleRowSelection，ant design的api就没那么清晰了，言归正传期望:Ant design table单击行选中勾选checkedbox 实现: 单选： onClickRow(record) { re...

antdesign vue a-table 单选勾选一行

莫不静好

07-15

3589

页面效果页面 methods中 onSelectChange(selectedRowKeys, selectionRows) { console.log('onSelectChange--',selectedRowKeys, selectionRows) this.selectedRowKeys = selectedRowKeys this.selectionRows = selectionRows },

Ant Design Vue table 点击行勾选checkbox

qq_42592968的博客

09-21

1461

Ant Design Vue table 点击行勾选checkbox

Ant Design Vue中Table行点击事件

qq549021475的博客

09-23

7734

1、官网提供的方法 2、a-table中设置rowSelection属性与customRow点击事件方法（如标题3） 3、单选与多选的方法 // Table行点击事件，单选onClickRow()，多选onClickRowMulti() onClickRow(record) { return { on: { click: () => { let keys = []; let rows =

ant中table组件全选选中所有行(ant design2.2.8)

MingT 明天你好！的博客

01-13

2590

ant中table组件全选选中所有行(ant design2.2.8)

ant design的table组件实现全选功能以及自定义分页

01-18

ant design的table组件实现全选功能以及自定义分页直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent ...

SpringBoot+AntDesignVue实现excel导入功能

07-20

在本篇文章中，我们将介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的功能。标题： SpringBoot+AntDesignVue 实现 ...

pro-table:Ant像Pro一样使用Ant Design Table！

05-28

ant-design/pro-table 将会迁移至 ant-design/pro-components 仓库进行后续的维护，访问了解更多。此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。@ant-design/pro-table:trophy: Use ...

ant design vue 表格table 默认勾选几项的操作

01-22

在 ant design vue 中，表格的第一列是联动的选择框截一张官方文档图，图示最后一排就是禁用状态点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...

Concis组件库封装——Loading加载中

量子前端的博客

06-22

2009

一个常规的react loading组件的开发和测试

qt练习控件label控件-lineEdit控件样例代码

最新发布

07-30

qt练习控件label控件-lineEdit控件样例代码

【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip

07-30

CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容主函数：Main .m；数据；调用函数：其他m文件；无需运行运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤步骤一：将所有文件放到Matlab的当前文件夹中；步骤二：双击打开除Main.m的其他m文件；步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类

详解MATLAB Simulink通信系统建模与仿真

07-30

第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写第3 章通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析第4 章信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道第5 章模拟调制 5.1 幅度调制 5.2 角度调制第6 章数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输第7 章数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK）第8 章信道编码和交织 8.1 概述 8.2 线性分组码

ant design vue 表格单选

05-17

Ant Design Vue 表格的单选功能可以通过 `type="radio"` 和 `selectedRowKeys` 来实现。首先，需要在表格组件中设置 `type="radio"`，表示单选。然后，将选中的行的 key 值存储在 `selectedRowKeys` 中，即可实现单选功能。以下是一个示例代码： ```vue <template> <a-table :columns="columns" :dataSource="data" rowKey="id" @row-select="onRowSelect" :rowSelection="{ type: 'radio', selectedRowKeys: selectedRowKeys }" /> </template> <script> export default { data() { return { selectedRowKeys: [], columns: [ { title: '姓名', dataIndex: 'name' }, { title: '年龄', dataIndex: 'age' }, { title: '地址', dataIndex: 'address' } ], data: [ { id: 1, name: '张三', age: 18, address: '北京市' }, { id: 2, name: '李四', age: 20, address: '上海市' }, { id: 3, name: '王五', age: 22, address: '广州市' } ] } }, methods: { onRowSelect(record) { this.selectedRowKeys = [record.id] } } } </script> ``` 在上面的代码中，我们设置 `type="radio"`，并在 `rowSelection` 中传入 `selectedRowKeys` 数组，用于存储选中行的 key 值。在 `onRowSelect` 方法中，将当前选中行的 key 值存储到 `selectedRowKeys` 中，即可实现单选功能。