本来高高兴兴，单选咱就用radio，多选用checkbox。选中数据，点击保存

多好，看，没有人受伤的世界完成了。

但是有一个问题，当数据多起来，表格就会分页，但是多选框选中的始终的是本页的数据。

也就是说假如在第一页选中三条数据后，点击到第二页选中一条数据，再点击保存，只会保存第二页中的一条数据。

那简单啊，把之前选中的拿个数组装起来不就好了。

那切换页面后，之前页面选中的数据怎么让它保持选中状态呢？

简单啊，操作绑定数据源的dataList，让元素的属性checked等于true不就好了。

好嘛，听起来好像很简单，但是要知道checkbox返回的不是一条数据，而是当前页面所选中元素的一个数组。我整了半天，没搞清楚逻辑，把自己整晕了。

我太菜了，那就到了方向转换的时候了。

换个思路，还是操作dataList的check，我换成radio，这样不就好了。但是这里的radio选中后就不能再点了，也就是取消不了了。

好嘛，那就邪道一点，把type改成yn，change的时候监听click不就好了。

这就是我这个菜鸟给出来的解决方案。

那么上代码吧。

dataList: any = [];
itemChecked: any = [];
paramId: string;// st
@ViewChild('st', { static: false }) st: STComponent;
columns: STColumn[] = [{ title: '', index: 'checked', type: 'yn' },...}
]// 给dataList初始化一下
ngOnInit(): void {this.http.post(`/findAll`).subscribe(res => {this.dataList = res;this.http.post(`另外一张表的url`, paramId).subscribe((res: any) => {this.dataList.forEach(e => {res.forEach(resp => {if (e.id === resp.cid) {this.itemChecked.push(e);e.checked = true;}});});this.st.reload();});});
}// st的change事件
change(item) {if (item.type === "click") {const id = item.click.item.id;const idx = this.itemChecked.findIndex(i => i.id === id);if (idx === -1) {this.itemChecked.push({ id: id });const tmp = this.dataList.find(i => i.id === id);tmp.checked = true;}else {this.itemChecked.splice(idx, 1);const tmp = this.dataList.find(i => i.id === id);tmp.checked = false;}this.st.reload();}
}// 保存
save(value: any) {const list = [];this.dataList.forEach(e => {if (e.checked) {list.push(e.id);}})value.list = list;this.http.post(`/save`, value).subscribe(res => {this.msgSrv.success('保存成功');this.modal.close(true);});
}

效果：