Ant Design Vue 给table表格行加点击事件
首先官方定义的是customRow设置行属性customRow设置行属性Function(record, index)官网上会给出这么使用:customRow 用法适用于customRowcustomHeaderRowcustomCellcustomHeaderCell。遵循Vue jsx语法。<TablecustomRow={(record) => {return {xxx... /
·
首先官方定义的是customRow设置行属性
customRow | 设置行属性 | Function(record, index) |
官网上会给出这么使用:
customRow 用法
适用于 customRow
customHeaderRow
customCell
customHeaderCell
。遵循Vue jsx语法。
<Table
customRow={(record) => {
return {
xxx... //属性
onClick: (event) => {}, // 点击行
onDblclick: (event) => {},
onContextmenu: (event) => {},
onMouseenter: (event) => {}, // 鼠标移入行
onMouseleave: (event) => {}
};
}}
customHeaderRow={(column) => {
return {
onClick: () => {}, // 点击表头行
};
}}
/>
但是很多小伙伴可能不会使用这种语法,或者一用就报错,跟我刚开始用一样 ,下面我们会介绍另一种方法:
正题
第一步
给a-table元素内加入这个属性 :customRow="rowClick"
<a-table
bordered
: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写到方法里即可
最后
如果对您有帮助,希望能给个👍评论/收藏/三连!
博主为人老实,无偿解答问题哦❤
更多推荐
已为社区贡献25条内容
所有评论(0)