官网地址

https://ant.design/components/table-cn/#components-table-demo-dynamic-settings

错误写法:

一开始会删除成功;再第二步的时候会删除失败;你会发现state中的数据就算你在确认删除后并清空数组,也跟本没有变化

  // 删除
    handleDelte = () => {
        if (this.state.selectedRowKeys.length <= 0) {
            message.warn('请选择要删除的数据!');
            return;
        }
        Modal.confirm({
            title: "确定要删除吗?",
            okText: '删除',
            cancelText: '取消',
            onOk: () => {
                service.deleteUser(this.state.selectedRowKeys).then(res => {
                    this.setState({selectedRowKeys:[]})
                    store.dispatch(LoadUserActionAsync(this.state.params))
                    message.info('删除成功!');
                }).catch(err => {
                    message.error('删除失败!');


                })

            }
        })
    },

// tab复选框选择进行触发
    userRowSelection = {
        onChange: (selectedRowKeys) => {
            // 获取ID
            this.setState({ selectedRowKeys: selectedRowKeys })
        }
    }
   render() {
        return (
            <div>
                 <Button style={this.buttonStyle} type="danger" onClick={this.handleDelte}>删除</Button>
                  <Table
                    style={{ 'background': '#fefefe' }}
                    dataSource={this.state.userlist}
                    columns={this.state.columns}
                    rowKey={record => record.id}
                    rowSelection={this.userRowSelection}
                    bordered
                    pagination={{ total: this.state.total, pageSize: 6, defaultCurrent: 1, onChange: this.changePage }}
                />
          </div>
        )
    }

 正确方法:把userRowSelection方法写在render中把this.userRowSelection改成userRowSelection

 对数据进行关联重要 selectedRowKeys: selectedRowKeys,

 

   render() {
        let { selectedRowKeys } = this.state;
        // tab复选框选择进行触发
        let userRowSelection = {
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys) => {
                // 获取ID
                this.setState({ selectedRowKeys: selectedRowKeys })
            }
        }
        return (
            <div>  
                   <Table
                    style={{ 'background': '#fefefe' }}
                    dataSource={this.state.userlist}
                    columns={this.state.columns}
                    rowKey={record => record.id}
                    rowSelection={userRowSelection}
                    bordered
                    pagination={{ total: this.state.total, pageSize: 6, defaultCurrent: 1, onChange: this.changePage }}
                />
      <AddUser visible={this.state.showAddUserDialog} close={this.hideAddUserDialog} />
            </div>
        )
    }

 

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐