将已选中状态的数据单独存储到一个数组。将当前页的数据和你所有已存储选中状态的值做比对,存在的话就改变当前页的checked
https://www.jianshu.com/p/80e1edcf01e0 loadsh插件 vue后台项目可使用去重 得异
代码如下:
<Table ref="selection" :loading="loading" :data="tableData" :columns="columns"
@on-select- all-cancel="handleCancelSelectAll" @on-select-all="handleSelectAll"
@on-select="handleSelect" @on-select-cancel="handleCancel" />
<Page :total="totals" :current="page" transfer :page-size="rows" show-elevator show-total @on-change="changepage" @on-page-size-change="_nowPageSize"></Page>
<script>
const uniqBy = require("lodash.uniqby");
const remove = require("lodash.remove");
const differenceBy = require("lodash.differenceby");
export default {
data(){
return {
spmxList: [], //已选中所有的值
tableData:[] //当前表格数据源
}
},
methods:{
/**
* 获取数据源
* @param param
* @returns {Array}
*/
mockTableData(param) {
if(!param) param={page:1,rows:100}
param.nfltsd=1;
this.loading = true;
this.ajax_post({ url: this.$local + "pos/doc/shangpin/baseinfo/page", params: param,}).then((res) => {
this.loading = false;
if (res.code == 0 && res.data) {
this.totals = res.data.total;
this.tableData = res.data.records;
this.updateChecked();
// this.spmxList = uniqBy(this.spmxList.concat(this.spmxList), "spdm");
} else {
this.$Notice.warning({title: res.msg});
}
});
},
//把源数据加上_checked字段,遍历已选项数据,更新选中状态
updateChecked() {
// 中间列表编辑选中(促销商品)
let tableData=this.tableData;
let spmxList=this.spmxList;
tableData.forEach((row)=>{
let _checked=false;
if(spmxList){
spmxList.forEach((spmx)=>{
if(row.spdm==spmx.spdm){
_checked=true;
return;
}
})
}
row._checked=_checked;
});
},
handleCancel(selection, row) {
this.spmxList = this.spmxList.filter(item => {
if (item.spdm !== row.spdm) {
return item
}
})
},
handleSelect(selection, row) {
//添加到已选项
this.spmxList.push({
spdm: row.spdm,
spmc: row.spmc,
picUrl: row.picUrl,
zjf: row.zjf,
type: "",
});
},
handleSelectAll(selection) {
this.spmxList = uniqBy(this.spmxList.concat(selection), "spdm");
},
handleCancelSelectAll(selection) {// 输出的是已选中的数据和当前页面不同的数据
this.spmxList = differenceBy(this.spmxList, this.tableData, "spdm");
},
}
}
</script>