element-table表格分页多选

# 项目场景：
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遍历选中值的id
    2.2给每个数据设置check值
    2.3遍历上次保存数据的ID
    2.4将当前列表未选中的数据遍历，并删除已保存数据中和未选中的相同ID数据
    2.5 将当前选中数据添加到上一步处理后的已保存数据中
    2.6 同步选中数据


<template>
  <el-dialog
    title="选择门店商品"
    :visible.sync="visible"
    :append-to-body="true"
    top="6vh"
    width="80%"
    :before-close="handleClose"
  >
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        size="mini"
        @select-all="handleSelectionChange"
        @select="handleSelectionChange"
      >
        <el-table-column
          disabled="true"
          type="selection"
          width="50"
        >
        </el-table-column>
        <el-table-column prop="goodsName" label="商品图片">
          <template slot-scope="scope">
            <el-image
              style="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 = value
      this.visible = true;
      this.getProductList();
    },
    handleSelectionChange(value) {
    2.1遍历选中值的id
    2.2给每个数据设置check值
    2.3遍历上次保存数据的ID
    2.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); // 获取外层商品ID
      let _ids = tableData.map(item => (item.check ? "-1" : item.product_id)); // 获取表格没选中的商品ID
      remove(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 = selectVal
      if (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>