<!--table組件需要使用ref="table"--><template> <div> <el-table :data="tableData" ref="table" stripe style="width: 100%" @selection-change="handleSelectionChange">  <el-table-column type="selection" width="55"></el-table-column>  <el-table-column prop="name" label="商品名稱"></el-table-column>  <el-table-column prop="barcode" label="商品編碼"></el-table-column>  <el-table-column prop="quantity" label="區(qū)域總庫存"></el-table-column> </el-table> <div class="block" v-show="page.pageTotal>10">  <el-pagination @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-size="page.pnum" layout="total, prev, pager, next , jumper" :total="page.pageTotal">  </el-pagination> </div> <div>  {{multipleSelectionAll.length}} </div> </div></template>

export default { data(){  return {  tableData: [], // 表格數(shù)據(jù)   multipleSelectionAll:[],//所有選中的數(shù)據(jù)包含跨頁數(shù)據(jù)  multipleSelection:[],// 當(dāng)前頁選中的數(shù)據(jù)  idKey: 'barcode', // 標(biāo)識列表數(shù)據(jù)中每一行的唯一鍵的名稱  page:{   //每頁數(shù)據(jù)量   pnum:10,   //數(shù)據(jù)總數(shù)   pageTotal:0,   //當(dāng)前頁，從1開始   currentPage:1,  }  } }, methods: {  handleCurrentChange(){  this.changePageCoreRecordData();  if(!this.$isNull(this.page.pageTotal)) this.getGoodsList();  },  handleSelectionChange (val) {  this.multipleSelection = val;  //實時記錄選中的數(shù)據(jù)  setTimeout(()=>{   this.changePageCoreRecordData();  }, 50)  },  setSelectRow() {  if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {   return;  }  // 標(biāo)識當(dāng)前行的唯一鍵的名稱  let idKey = this.idKey;  let selectAllIds = [];  let that = this;  this.multipleSelectionAll.forEach(row=>{   selectAllIds.push(row[idKey]);  })  this.$refs.table.clearSelection();  for(var i = 0; i < this.tableData.length; i++) {      if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {   // 設(shè)置選中，記住table組件需要使用ref="table"   this.$refs.table.toggleRowSelection(this.tableData[i], true);   }  }  },  // 記憶選擇核心方法  changePageCoreRecordData () {  // 標(biāo)識當(dāng)前行的唯一鍵的名稱  let idKey = this.idKey;  let that = this;  // 如果總記憶中還沒有選擇的數(shù)據(jù)，那么就直接取當(dāng)前頁選中的數(shù)據(jù)，不需要后面一系列計算  if (this.multipleSelectionAll.length <= 0) {   this.multipleSelectionAll = this.multipleSelection;   return;  }  // 總選擇里面的key集合  let selectAllIds = [];  this.multipleSelectionAll.forEach(row=>{   selectAllIds.push(row[idKey]);  })  let selectIds = []  // 獲取當(dāng)前頁選中的id  this.multipleSelection.forEach(row=>{   selectIds.push(row[idKey]);   // 如果總選擇里面不包含當(dāng)前頁選中的數(shù)據(jù)，那么就加入到總選擇集合里   if (selectAllIds.indexOf(row[idKey]) < 0) {   that.multipleSelectionAll.push(row);   }  })  let noSelectIds = [];  // 得到當(dāng)前頁沒有選中的id  this.tableData.forEach(row=>{   if (selectIds.indexOf(row[idKey]) < 0) {   noSelectIds.push(row[idKey]);   }  })  noSelectIds.forEach(id=>{   if (selectAllIds.indexOf(id) >= 0) {   for(let i = 0; i< that.multipleSelectionAll.length; i ++) {    if (that.multipleSelectionAll[i][idKey] == id) {    // 如果總選擇中有未被選中的，那么就刪除這條    that.multipleSelectionAll.splice(i, 1);    break;    }   }   }  })  },  //請求接口部分  getGoodsList(){  let data = {};  data['page'] = this.page.currentPage;  data['pnum'] = this.page.pnum;  this.$ajax({   url:'goods/list',   data:data  }).then(val => {   this.tableData = val.data.rows ? val.data.rows : [];   this.page = {   pnum:10,   pageTotal:val.data.total,   currentPage:val.data.page,   };   setTimeout(()=>{   this.setSelectRow();   }, 50)  })  } }, created () {  this.getGoodsList() } }