ant-design-vue 中table行 绑定点击双击事件

antd Table行操作

需求:博主有个双击Table中的某一行,根据当前行数据,进入新页面的操作。在这里插入图片描述

onRow 用法

适用于 onRow onHeaderRow onCell onHeaderCell。
antd官网链接:https://3x.ant.design/components/table-cn/#onRow-%E7%94%A8%E6%B3%95

<Table
  onRow={record => {
    return {
      onClick: event => {}, // 点击行
      onDoubleClick: event => {}, //双击
      onContextMenu: event => {}, //右键菜单
      onMouseEnter: event => {}, // 鼠标移入行
      onMouseLeave: event => {},// 鼠标移出行
    };
  }}
  onHeaderRow={column => {
    return {
      onClick: () => {}, // 点击表头行
    };
  }}
/>

例子:

//双击事件
  onRowDoubleClick(record, index, event) {
    console.log(index, record);
    event.stopPropagation(); //阻止默认事件
  },
render(){
    return(
        <Table  
        	columns={columns}  
       		dataSource={data} 
            onRow={(record,rowkey)=>{
                return{
                    onDoubleClick : this.onRowDoubleClick.bind(this,record,rowkey)    // record 指的当前行的数据内容,rowkey指的是当前行的下标
                }
            }}
        />
    )
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值