问题需求（前言描述）

1619158083(1).jpg

1619162027(1).jpg
公司的供货商系统涉及到发货出库，产品要求可以分页保存之前选择的数据，最后点击确定一并带出到外面的表格里，让后端写接口是肯定不行的，所以前端只能我自己来

解决思路（前言描述）

可以利用map对象特性，将当前页选中的数据匹配对应到map对象里，在监听多选方法里实时更新当前页的操作，对应的储存到map对象里，最后选择完毕点击弹窗确认，整合map对象里的数据，话不多说上代码

1.HTML

1619159825(1).jpg

2.JS

初始化对象

data(){
  return {
    newArr: new Map(), //定一个map对象
    chooseLength: '',  //选中的个数
    cgDia:false,       //控制弹窗布尔值
    tableData: [       //为了方便演示写的表格假数据,记住一定要让后端给你一个唯一值
      {
        supSkuId: 8429,//这个目前就是唯一值
        omsGoodsCode: '',
        goodsName: '分仓商品002',
        value: 'LJW',
        barcode: null,
        brandName: '中杰',
        goodsType: 'INIT',
      },
      {
        supSkuId: 8405,
        omsGoodsCode: '',
        goodsName: '分仓商品001',
        value: '分仓商品001',
        barcode: null,
        brandName: '东成',
      },
      {
        supSkuId: 8394,
        omsGoodsCode: '',
        goodsName: '测试',
        value: 'Z1C-FF03-hh(26)  80/88 750w  7*40T  50×55',
        barcode: null,
        brandName: '标智',
        goodsType: 'INIT',
      },
    ],
  }
}
复制代码

初始化界面打开弹窗，这里的arr参数则为之前选中的数据supSkuId集合，如果第一次选则商品弹窗界面则默认为空

/**初始化界面打开弹窗 */
initModal(arr = []) {
  const keys = this.newArr.keys();
  //如果arr不为空,则需要进行整合，将数据放置到map对象里
  for (let i of keys) {
    this.newArr.set(
      i,
      this.newArr.get(i).filter((item) => {
        return arr.includes(item.id);
      })
    );
  }
  this.getChooseLength();
  this.initPage();
  this.cgDia = true;
},
复制代码

arr 接口返回的表格Data数据,切换分页和点击确定时，保存之前页面选中的数据

  /**
  * @param {arr} 接口返回的表格Data数据
  * 切换分页和点击确定时，保存之前页面选中的数据
  */
  deploySelcect(arr) {
    //获取当前页数
    const { current } = this.$refs.modelPage;
    //整合选中的数据supSkuId集合
    const idList = this.newArr.get(current)
      ? this.newArr.get(current).map((ele) => {
          return ele.supSkuId;
        })
      : [];
    //获取下来的数据判断是否存在选中的list里，是则赋值true，并返回处理好的数据
    return arr.map((ele) => {
      ele._checked = idList.includes(ele.supSkuId);
      return ele;
    });
  },
复制代码

初始化商品选择弹窗,也支持查询获取表格数据（就是平时常见业务获取数据）

  /**初始化商品选择弹窗,也支持查询获取表格数据 */
  async initPage(page = 1, pageSize = 10) {
    const pageOptions = { page, pageSize };
    const data = this.$formatParams({ ...this.form, ...pageOptions });
    //获取后端的数据，这里就根据自己的业务接口来
    let { total, items, success } = await api.supPurchaseOrder4SearchList(
      data
    );
    //在这里处理好数据返回
    items = this.deploySelcect(items);
    this.orderData = items || [];
    this.total = total;
    return items;
  },
复制代码

获取已选数据的个数，从map对象里循环获得各页选中的数据

  /**获取已选数据的个数 */
  getChooseLength() {
    const list = [];
    this.newArr.forEach((ele) => {
      list.push(...ele);
    });
    this.chooseLength = list.length;
  }

复制代码

表格多选操作，这一步往map里塞值，对应的当前页储存

 /**表格多选操作 */
 selectRow(arr) {
   //获取当前页数
   const { current } = this.$refs.modelPage;
   this.newArr.set(current, arr);
   this.getChooseLength();
 }
复制代码

最后点击弹窗确定按钮，整合数据并发送给父级添加商品页，大功告成

 /**点击确定按钮 */
 sure() {
   const list = [];
   this.newArr.forEach((ele) => {
     list.push(...ele);
   });
   this.$emit('sureChoose', list);
   this.cgDia = false;
 }
复制代码