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

最新推荐文章于 2025-09-24 17:01:24 发布

原创最新推荐文章于 2025-09-24 17:01:24 发布 · 5.3k 阅读

3 ·

CC 4.0 BY-SA版权

web开发同时被 2 个专栏收录

39 篇文章

订阅专栏

19 篇文章

订阅专栏

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

/**
 *工具组件封装
 * 用于行点击选中处理
 *
 */
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
   }}
/>

)

}