1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Ant Design Vue 给table表格行加点击事件

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

时间:2022-04-06 02:36:24

相关推荐

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

首先官方定义的是customRow设置行属性

官网上会给出这么使用:

customRow 用法

适用于customRowcustomHeaderRowcustomCellcustomHeaderCell。遵循Vue jsx语法。

<TablecustomRow={(record) => {return {xxx... //属性onClick: (event) => {}, // 点击行onDblclick: (event) => {},onContextmenu: (event) => {},onMouseenter: (event) => {}, // 鼠标移入行onMouseleave: (event) => {}};}}customHeaderRow={(column) => {return {onClick: () => {}, // 点击表头行};}}/>

但是很多小伙伴可能不会使用这种语法,或者一用就报错,跟我刚开始用一样 ,下面我们会介绍另一种方法:

正题

第一步

给a-table元素内加入这个属性 :customRow="rowClick"

<a-tablebordered:data-source="dataSource":columns="columns":customRow="rowClick"/>

第二步

这样定义函数名就可以,然后返回你想用什么事件触发,这里点击事件触发onClick,返回的第一个参数是点击的行参数,第二个是行下标

function rowClick(record, index) {return {onClick: (event) => {console.log(record.tablename, index, event, "666");},};}

这里我用的是vue3.0,vue2.0写到方法里即可

最后

如果对您有帮助,希望能给个👍评论/收藏/三连!

博主为人老实,无偿解答问题哦❤

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。