美文网首页
ant design react table 复选框默认值设置

ant design react table 复选框默认值设置

作者: 晓丽_c080 | 来源:发表于2020-04-23 11:00 被阅读0次

    首先在 table 复选框需要在table 里加上rowSelection

    <Table
    bordered={true}
    loading={false}
    dataSource={treeData}
    columns={this.columns}
    pagination={false}
    rowKey='pkResource'
    rowSelection={rowSelections}
    />

    rowSelections 里面设置selectedRowKeys 就是默认要选中的key值,这里是数组比如['1','2'] 。这里需要注意如果使用了selectedRowKeys,在onChange里就要更新selectedRowKeys 的值;不然点击复选框是不会改变的,因为默认值写死了;如果table写在子组件里,而默认值是在父组件传过来的,那么 rowSelections 也应该在父组件里写,然后传给子组件(在父组件里记得生命userSelected:[])

      const rowSelections = {
        selectedRowKeys: userSelected.map(item => item.pkUser),
        columnWidth: 40,
        onChange:(selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            this.setState({ userSelected:selectedRows })
        }
    }
    

    相关文章

      网友评论

          本文标题:ant design react table 复选框默认值设置

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