解决Antd 控件Table 的行选中问题(结合mobx)

1. 目标：点击数据行单元格时，自动选中该行

2. 变量定义

    /** 选中记录值; */
    @observable rowSelected = [];

    @computed get rowSelection() {
        let opts = {
            selectedRowKeys: this.rowSelected,
            onChange: (selectedRowKeys, selectedRows) => {
                // selectedRowKeys = rowKeys;
                console.log(selectedRowKeys);
                console.log(selectedRows);
                // console.log('选中对象:' + JSON.stringify(selectedRowKeys));
            },
        };
        return opts;
    }

3. 控件配置

<Table

    rowKey={this.objKeys}

    columns={this.tabCols}

    dataSource={this.dataSource}

    pagination={this.pagination}

    onChange={this.schHandler.onTableChange}

    // onRowClick={this.onRowClick}

    rowSelection={this.rowSelection}

    onRow={(record) => ({

     onClick: () => {

        let val = record[this.objKeys];

        let rowKeys = [];

        this.rowSelected.forEach(x => { rowKeys.push(x); });

        let idx = rowKeys.indexOf(val);

        console.log(idx);

        if (idx === -1) { rowKeys.push(val); } else { rowKeys.splice(idx, 1); }

        console.log(rowKeys);

        this.rowSelected = rowKeys;  // 通过对 rowSelected 重新赋值，触发rowSelection变更，刷新控件。

     },

     onDoubleClick: () => { },

     onContextMenu: () => { },

     onMouseEnter: () => { },

     onMouseLeave: () => { },

    })}

/>

 

 

antd 版本参考最新更新内容: https://www.oschina.net/news/91195/ant-design-3-0-0

转载于:https://www.cnblogs.com/liumwen/p/9363845.html