antd表格行点击按钮选中事件

博客展示了组件页面中render方法的代码示例,包含基本的return结构,属于前端开发中组件渲染相关内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/**
 *工具组件封装
 * 用于行点击选中处理
 *
 */
export const dealWidthSelectRow = dealData =>{
   const {
      rowKeys,//选中行key值数组
      rows,//选中行对象数组
      record//选中单行对象
   } = dealData;
   let  x = rowKeys.findIndex((value,index)=>{
      return value === record.key
   });
   if(x === -1){
      rowKeys.push(record.key);
      rows.push(record)
   }else{
      delete rowKeys[x];
      delete rows[x]
   }
   TrimSpace(rows);
   TrimSpace(rowKeys);
   return {
      rowKeys:rowKeys,
      rows: rows
   }
};

组件页面:

class A extend ...{
  onRowClick = (record, selected, selectedRows, nativeEvent)=>{
   let dealData = {
      rowKeys : this.state.selectedRowKeys,
      rows : this.state.selectRows,
      record : record
   };
   let {rowKeys, rows} = dealWidthSelectRow(dealData);
   console.log(rowKeys);
   console.log(rows);
   this.setState({
      selectedRowKeys:rowKeys,
      okSelectNum: rows.length,
      selectRows: rows
   })
};

render(){

return (

<Table
   rowClassName={(record) => {
      let className = null;
      if (record.id === '' || record.id === null || record.id === undefined) {
         className = 'close_checkbox'
      }
      return className
   }
   }
   onRow={(record, index) => {
       return {
          onClick: () => {
             this.onRowClick(record, index)
          }  //点击行
       }
    }}
   rowSelection={rowSelection}
   columns={this.columns}
   dataSource={data}
   loading={loading}
   onChange={this.handleTableChange}
   pagination={{
      total: pageTotal,
      showQuickJumper:true,
      current: pagination.pageNum
   }}
/>

)

}

}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值