react项目实战（权限模块开发九）dva的table控件使用

最新推荐文章于 2021-07-10 14:00:22 发布

原创最新推荐文章于 2021-07-10 14:00:22 发布 · 948 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

react项目实战专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用 DVA 的 Table 组件实现行点击单选功能、通过勾选复选框实现多选功能，并为选中的行添加背景色以便于查看。具体实现了点击行时设置当前行的 checkbox 进行选中并取消之前选中的行；点击 checkbox 设置当前行为选中状态，保留之前的选择；若当前行的 checkbox 被选中，则为该行添加背景色。

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

dva的table使用其实没必要讲的，看官方api就知道咋用。
但项目提出了3个需求，在现有控件里面并没有找到相应的方法。
1、点击行时，设置当前行的checkbox进行选中，并将以前选中的行取消，点击行只能是单选。
2、点击checkbox、设置当前行为选中，并不取消以前选中的行，也就是通过点击checkbox实现多选。
3、如果当前行的checkbox被选中，则该行的添加一个背景颜色，方便查看。

上效果图吧。
如果checkbox被选中，则有个背景颜色
这里写图片描述

点击checkbox来实现多选

这里写图片描述

（一）点击行实现单选
为table注册一个onRowClick事件来实现单选：

....
  <Table rowSelection={this.rowSelection.bind(this)()} onRowClick={this.selRecord.bind(this)} columns={GoingUtils.getTableColumns(fieldAry)} dataSource={dataSource}/>
  .....

this.selRecord.bind(this)的代码如下：

  selRecord(record, index, event){
    const { dispatch }=this.props;
    //设置state里面的selRowId为当前选中行的key
    this.setState({selRowId:[record["key"]]}); 
  }

由于用到了state里面的selRowId，所以需要进行初始化

 //初始化state
    this.state={
      //默认，角色表格选中行为空
      selRowId:[]
    }

将默认选中行的信息设置给table的rowSelection

  rowSelection() {
    return {
      //默认选中的行
      selectedRowKeys: this.state.selRowId,
      //点击checkbox 选中记录时触发的函数。
      onSelect: (record, selected, selectedRows)=> {
        this.setState({selRowId:this.state.selRowId.concat([record["key"]])})
      }
    }
  }

点击checkbox实现多选：

 rowSelection() {
    return {
      //默认选中的行
      selectedRowKeys: this.state.selRowId,
      //点击checkbox 选中记录时触发的函数。
       onSelect: (record, selected, selectedRows)=> {
        //将选择的记录key 跟以前选中的记录进行拼接
        this.setState({selRowId:this.state.selRowId.concat([record["key"]])})
      }
      }
    }
  }

要实现选中的记录带背景色，这个比较麻烦，至少我没找到简单的法子，如果是组件来实现，确实非常简单，但问题就在于没找到组件相应接口，但又不能直接去改源代码。只能通过jquery来实现咯，在componentDidUpdate里来进行操作

  //render发生变更后
  componentDidUpdate(){
    $(".go-sel-row").removeClass("go-sel-row");
    $(".ant-checkbox-checked").closest("tr").addClass("go-sel-row")
  }