# 項目場景： element table分頁多選列表，使用reserve-selection,獲取多選數據時正常，但是返顯出現問題。返顯后，再次選擇，沒有打開的列表頁數據會丟失。# 問題描述： 保存數據后，再次進入選擇，只在第一頁操作多選，發現已經保存的第2頁，第3頁數據丟失。# 原因分析： 定位后發現，reserve-selection有缺陷問題。已查看過的分頁數據可以正常獲取。沒有調用的分頁的數據，框架是無法處理的。這種只適用于一次保存。# 解決方案： 1.獲取已經保存的數據async getProductList() {this.loading = true;this.push = true;const data = await getproductIndexesSelections({page: this.pageData.page,per_page: this.pageData.perPage,...this.queryData,categoryId:this.queryData.categoryId && this.queryData.categoryId.length? this.queryData.categoryId[this.queryData.categoryId.length - 1]: "",});let result = data.items;this.pageData.perPage = data.per_page;this.pageData.totalNum = data.total;this.tableData = result? result.map((item) => {if (!item.images) item.images = [];if (this.single) return item;this.value.forEach((v) => {if (v.spu_code === item.spu_code && v.bar_code === item.bar_code) {item.check = true;item.sequence = v.sequence}});return item;}): [];this.loading = false;if (this.single) return;this.toggle(this.tableData);},toggle(data) {if (data.length) {this.$nextTick(function() {data.forEach((item) => {//如果數據中的check == true的話 讓這一列選中if (item.check) {//multipleTable 是這個表格的ref屬性 true為選中狀態this.$refs.multipleTable.toggleRowSelection(item, true);}});});}}, 2. 篩選選中的值 handleSelectionChange（）2.1遍歷選中值的id2.2給每個數據設置check值2.3遍歷上次保存數據的ID2.4將當前列表未選中的數據遍歷，并刪除已保存數據中和未選中的相同ID數據2.5 將當前選中數據添加到上一步處理后的已保存數據中2.6 同步選中數據<template><el-dialogtitle="選擇門店商品":visible.sync="visible":append-to-body="true"top="6vh"width="80%":before-close="handleClose"><el-tablev-loading="loading"ref="multipleTable":data="tableData"size="mini"@select-all="handleSelectionChange"@select="handleSelectionChange"><el-table-columndisabled="true"type="selection"width="50"></el-table-column><el-table-column prop="goodsName" label="商品圖片"><template slot-scope="scope"><el-imagestyle="width: 40px; height: 40px":src="scope.row.images[0]"></el-image></template></el-table-column></el-table></el-dialog> </template> <script> import { remove, cloneDeep } from "lodash";export default {components: {},mounted() {,props: ["single", "goodNum"],methods: {//父級組件調用傳參數show(value) {this.value = valuethis.visible = true;this.getProductList();},handleSelectionChange(value) {2.1遍歷選中值的id2.2給每個數據設置check值2.3遍歷上次保存數據的ID2.4將當前列表未選中的數據遍歷，并刪除已保存數據和未選中的相同ID數據2.5 將當前選中數據添加到上次保存數據中2.6 同步選中數據let ids = value.map(item => item.product_id);let tableData = this.tableData.map(item => {item.check = ids.indexOf(item.product_id) !== -1;return item;});let newData = cloneDeep(this.value); // 獲取外層商品ids = newData.map(item => item.product_id); // 獲取外層商品IDlet _ids = tableData.map(item => (item.check ? "-1" : item.product_id)); // 獲取表格沒選中的商品IDremove(newData, item => _ids.indexOf(item.product_id) !== -1); // 根據沒選中的商品ID剔除tableData.forEach(item => {// 遍歷篩選中的值if (ids.indexOf(item.product_id) === -1 && item.check) newData.push(item);});let selectVal = newData.slice(0, this.goodNum);this.value = selectValif (this.goodNum && newData.length > this.goodNum) {// 截取20位之后的數組 禁止選中let tempArr = newData.slice(this.goodNum);if (tempArr.length !== 0) {tempArr.forEach(item => {this.$refs.multipleTable.toggleRowSelection(item, false);});}this.$message.warning("添加失敗,最多可選20個");}this.$emit("setGoods", selectVal);},currentChange(page) {this.pageData.page = page;this.getProductList();},async getProductList() {this.loading = true;this.push = true;const data = await getproductIndexesSelections({page: this.pageData.page,per_page: this.pageData.perPage,...this.queryData,categoryId:this.queryData.categoryId && this.queryData.categoryId.length? this.queryData.categoryId[this.queryData.categoryId.length - 1]: "",});let result = data.items;this.pageData.perPage = data.per_page;this.pageData.totalNum = data.total;this.tableData = result? result.map((item) => {if (!item.images) item.images = [];if (this.single) return item;this.value.forEach((v) => {if (v.spu_code === item.spu_code && v.bar_code === item.bar_code) {item.check = true;item.sequence = v.sequence}});return item;}): [];this.loading = false;if (this.single) return;this.toggle(this.tableData);},toggle(data) {if (data.length) {this.$nextTick(function() {data.forEach((item) => {//如果數據中的check == true的話 讓這一列選中if (item.check) {//multipleTable 是這個表格的ref屬性 true為選中狀態this.$refs.multipleTable.toggleRowSelection(item, true);}});});}},},data() {return {pageData: {page: 1,perPage: 10,},value:[],visibleUpload: false,result: [],defaultProps: {label: "name",children: "sub_categories",},visible: false,height: 650,queryData: {},tableData: [],loading: false,};}, }; </script>

總結

以上是生活随笔為你收集整理的element-table表格分页多选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。