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

最新推荐文章于 2024-04-16 09:46:49 发布
原创 最新推荐文章于 2024-04-16 09:46:49 发布 · 4.2k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#reactjs #antd table #表格单选 #表格点击行选中
博客介绍了Antd table实现单选和点击行选中的方法。实现单选只需在属性里添加相关设置；实现点击行选中需用到特定属性，在事件里手动设置，且赋值时要将其变为数组，并给出了完整配置。

实现单选

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

实现点击行选中

需要用到onRow属性
在这里插入图片描述
在这里插入图片描述
在onClick事件里面手动设置selectRowKey，跟Table onChange事件一样

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

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

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

阿炜死了
关注
Ant Design Vue - 表格 ＜a-table＞ 组件绑定行点击事件（点击表格行事件）
🏆 前端领域优质创作者
12-28 2万+
Ant Design Vue (4) 给table表格整行加点击事件antd的表格点击表格整行添加点击事件vue用ant design中table表格,点击某行时触发的事件操作vue用ant design中table表格,点击某行时触发的事件操作ant table表格整行点击事件并获取当前行的数据Ant design vue表格行点击事件 表格 ＜a-table＞ 组件绑定行点击事件（点击表格行事件）
antd:table表格实现单选功能——基础积累
yehaocheng520的博客
12-17 9581
前一段时间，在弄antd的框架，感觉MVVM的写法真的很香。组件各种封装。 遇到一个需求：需要实现table表格的单选功能： 代码如下： 1.html部分的代码 <a-table :columns="taskOrderColumns" :dataSource="taskOrders" :rowKey="(r,i)=>{i.toString()}" :pagination="false" :row-selection="{ selectedRowKeys: selec
AntDesign table 行的多选（分页）以及控制某一行是否可选
pig_ning的博客
04-16 1248
AntDesign table 行的多选（分页）以及控制某一行是否可选
antd表格默认选中行（单选或多选都可）
土匪丁的博客
03-13 8970
先放上官网文档 实现默认选中行主要处理rowSelection，onChange和selectedRowKeys是关键。onChange用于点击选项时候的回调，selectedRowKeys表示选中的行的key。 那么可以用这个思路默认设置selectedRowKeys的值，onChange事件触发的时候再改变selectedRowKeys。 这里默认单选选中第一行 完整代码如下 class TestTable extends Component { constructor(
antd表格单选
sunnyjingqi的博客
12-17 3474
表格的单选也是通过rowSelection来进行配置的，需要selectedRowKeys和onChange: (selectedRowKeys, selectedRows) => {}方法一起使用来安成表格的单选，selectedRowKeys接受一个数组，数组内是选项的key，onChange时去修改它。 代码如下： const rowSelection = { selectedRowKeys: type === 1 ? this.context.ConfigManage.gen
antd Table表格点击行选中前面的选择框
土匪丁的博客
03-21 2975
antd的官网有个例子推荐，https://codesandbox.io/s/000vqw38rl 放上onRow的用法 原理就是点击行的时候将所点击行的内容的key设置到selectedRowKeys中，和rowSelection中onChange的相同，只不过一个是点击checkbox/radio,一个是点击行 完整多选的情况： export default class App extends Component { state = { selectedRowK
Ant Design Vue table表格点击行选中多选框
qq_43364234的博客
12-30 1万+
参考官方文档，实现点击行选中前边的多选框 <template> <div> <a-table :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps:getCheckboxPr...
Ant design vue 表格设置选中行进行设置复选框选中
梦可由天的博客
05-13 3万+
Ant design vue 表格设置选中行–>进行设置复选框选中 常规情况下, 我们要想选中一条数据, 需要点击该行行首的复选框, 无奈复选框稍小, 因此想要实现如题功能, 用的是这款ui框架, 主要看它的样式都比较好看, 和elementui很相像, 不知道谁模仿谁, 感觉这个做的好一点而且提供了一套中后台权限管理系统模板. 但是有些功能 比如这个点击行进行选中, 没有很方便的在官网文...
ant.design.vue中table的使用说明
热门推荐
weixin_44051815的博客
05-09 3万+
table的创建 <a-table :columns="columns" // 表头 :dataSource="data" // 数据源 :loading='loading' // 加载loading :pagination="pagination" // 页脚 :scroll="scroll" // 控制table的滚动 :rowKey="setTableKey"...
react antd table表格点击一行选中数据的方法
BHSZZY的博客
10-10 6793
antd的table，默认是点击左边的单选/复选按钮，才能选中一行数据；现在想实现点击右边的部分，也可以触发操作选中这行数据。可以使用onRow实现，样例如下。
antd Table点击整行选中
laishaojiang的博客
07-15 5495
antd官网例子上默认是点击checkbox或者radio才会选中，这对体验上来说有点不太方便，所以需求是要做成点击Table的整行直接触发选中。其实官方也有给了个例子https//codesandbox.io/s/000vqw38rl，这是使用class写的checkbox框。但是我项目是使用hooks的，而且是个radio框，所以就自己写了个。...
antd中table组件选中单行换样式（比如背景颜色）
见贤思齐焉，见不贤内自省
12-14 8501
今天项目中有一个需求，点击某一行后，将改行的背景颜色换掉，换成一个比较醒目的颜色。 首先看了看官方，官方还是比较可爱可亲的，都给我们准备好了，
antd table 单选或者多选的默认选中行设置
weixin_45748897的博客
09-26 7168
antd 的table 默认选中bug 话不多说，先上官方文档 主要设置 rowSelection 设置默认选中行，需要 onChange 和 selectedRowkeys 配合 思路： 默认设置selectedRowKeys的值，onChange事件触发的时候再改变selectedRowKeys。 部分代码如下 const [selectedRowKeys, setSelectedRowKeys] = useState([]) ···省略··· <Table rowKey="id
Ant Design Vue 给table表格行加点击事件
陈新科的博客
11-16 1万+
首先官方定义的是customRow设置行属性 customRow 设置行属性 Function(record, index) 官网上会给出这么使用： customRow 用法 适用于customRowcustomHeaderRowcustomCellcustomHeaderCell。遵循Vue jsx语法。 <Table customRow={(record) => { return { xxx... //属性 onClick...
antdev框架 a-table实现单选
qq_38650613的博客
06-15 3600
【代码】antdev框架 a-table实现单选。
隐藏antd Table的选择框 单选和复选以及点击当前行选中
厚积薄发.
07-25 3008
【代码】隐藏antd Table的选择框 单选和复选以及点击当前行选中。
antd vue table控件的使用（二）
qiulei_21的专栏
04-07 1371
antd vue table的选择
ant-design-vue 表格使用单选的方法
今日最可爱YeahT
05-14 1万+
参考API：https://www.antdv.com/components/table/#components-table-demo-selection 1，type没有写的时候默认是多选的 ，type为 'radio'是单选的 <s-table ref="tableModal" size="middle" rowKey="id" :columns="devColumns" v-tableScrollBar...
AntD of Vue table 点击选中当前行
ps199532的博客
02-14 1892
Antd for vue table 自动选中当前行
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值