美文网首页让前端飞
antd的Table组件怎样勾选表格行

antd的Table组件怎样勾选表格行

作者: 废柴码农 | 来源:发表于2019-01-09 20:59 被阅读17次

    用官方提供的方法rowSelection代码如下:

      const rowSelection = {
          onChange: (selectedRowKeys, selectedRows) => {
              console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          getCheckboxProps: record => ({
              disabled: record.name === 'Disabled User', // Column configuration not to be checked
              name: record.name,
          }),
      };
    
     <Table 
      columns={columns} 
      rowSelection={rowSelection}
      rowKey={record =>record.id} //这一个一定要选
      dataSource={this.state.tableData} 
      pagination={false}
      />
    

    注意:上面这种方法是我从官网copy下来的但是会有一个潜在的bug,就是选中后再次进来页面不能清除上一次选中的缓存,我的前两篇文章会有介绍,下面具体又复制了另一种方法,代码如下:

    state={
    selectedRowKeys:[ ],
    }
    const {selectedRowKeys } = this.state;
                const rowSelection = { 
                    selectedRowKeys,
                    onChange: (selectedRowKeys) => {
                        this.setState({
                            selectedRowIds : selectedRowKeys.map(Number),
                            selectedRowKeys 
                        })
                    },
                };
    //这种方法如果清楚缓存的时候只需要清楚掉selectedRowKeys为空即可。
    

    相关文章

      网友评论

        本文标题:antd的Table组件怎样勾选表格行

        本文链接:https://www.haomeiwen.com/subject/slknrqtx.html