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

男娘i 2022-06-11 05:23 214阅读 0赞

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

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

点击checkbox来实现多选

![这里写图片描述][SouthEast 1]

（一）点击行实现单选  
为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")
      }

[SouthEast]: /images/20220611/552885587a69452da9030d1dce51d648.png
[SouthEast 1]: /images/20220611/e74993c35ee044e4ae7eae6c3798f3a2.png