实现前端table表格多选模式下,点击分页保存之前选择的数据,且记录选中的条数(包括点击添加回显之前的数据)

1,901 阅读2分钟

问题需求(前言描述)

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: [       //为了方便演示写的表格假数据,记住一定要让后端给你一个唯一值
      {
        id: 8429,//这个目前就是唯一值
        omsGoodsCode: '',
        goodsName: '分仓商品002',
        value: 'LJW',
        barcode: null,
        brandName: '中杰',
        goodsType: 'INIT',
      },
      {
        id: 8405,
        omsGoodsCode: '',
        goodsName: '分仓商品001',
        value: '分仓商品001',
        barcode: null,
        brandName: '东成',
      },
      {
        id: 8394,
        omsGoodsCode: '',
        goodsName: '测试',
        value: 'Z1C-FF03-hh(26)  80/88 750w  7*40T  50×55',
        barcode: null,
        brandName: '标智',
        goodsType: 'INIT',
      },
    ],
  }
}

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

/**初始化界面打开弹窗 */
initModal(arr = []) {
  //如果arr不为空,则需要进行整合,将数据放置到map对象里
  const newMap = new Map();
  arr.forEach((ele) => {
     newMap.set(ele.id, ele);
  });
  this.newArr = newMap;
  this.getChooseLength();
  this.initPage();
  this.cgDia = true;
},

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

  /**
  * @param {arr} 接口返回的表格Data数据
  * 切换分页和点击确定时,保存之前页面选中的数据
  */
  deploySelcect(arr) {
    //整合选中的数据id集合
    const idList = [];
    this.newArr.forEach((ele) => {
      idList.push(ele.id);
    });
    //获取下来的数据判断是否存在选中的list里,是则赋值true,并返回处理好的数据
    return arr.map((ele) => {
      ele._checked = idList.includes(ele.id);
      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) {
   arr.forEach((ele) => {
     this.newArr.set(ele.id, ele);
   });
   this.getChooseLength();
 }

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

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

2021/04/27 17:31 更新日记:解决了评论区说查询会数据错乱问题

尽可能的表达和书写规范,让大家能看懂,因为是公司项目如果需要提供页面想看效果的,可以私聊我,我给你一个账号密码,让你看看效果

很少写文章,不知道能不能表达清楚,虚心学习,虚心接受指正和批评,谢谢观看,(#^.^#)嘻嘻