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