以上是文档中所提到的,具体实现代码如下
1、在columns中设置第一项,一定不要忘记key
{
type: "selection",
width: 60,
align: "center",
key: "Id",
},
2、table组件:
<i-table
:loading="loading"
:columns="columns"
:data="list"
no-data-text="暂无数据"
@on-select="selectData"
@on-select-cancel="selectCancel"
/>
3、选中或取消选中
//选择的数据
selectData(selection, row) {
if (!this.selectedId.includes(row.Id)) {
this.selectedId.push(row.Id);
}
},
//取消选择
selectCancel(selection, row) {
var _index = this.selectedId.indexOf(row.Id);
if (_index != -1) {
this.selectedId.splice(_index, 1);
}
},
4、处理分页切换后回到原来的页面,以前勾选的还任然保留
data(){
return{
selectedId: [],
}
}
//list是请求接口拿到的数据
//主要是通过 _checked = true来实现勾选的
if (this.selectedId.length) {
this.list.forEach((ele) => {
if (this.selectedId.includes(ele.Id)) {
ele._checked = true;
}
});
}