iview的带有checkbox的table分页带上选中状态

将已选中状态的数据单独存储到一个数组。将当前页的数据和你所有已存储选中状态的值做比对，存在的话就改变当前页的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>