使用el-table选择进行保存，实现分页多选，设置选中，编辑原数据默认值不变

应用场景

我这边做的是一个进销存系统，模块是库存盘点，需要实现新增盘点单，暂存盘点单。做到新增盘点单选择商品时的一些记录。功能是从全部商品中选取几种放入表单表格中，并附带默认值，默认值更改后，再次选择商品，商品更改后的默认值不变，商品表格可进行分页多选，下面一步一步来

实现商品表格数据多选（因为目前只做了五条数据，所以每页展示了两条）

效果

用到三个数组进行数据变化

1、商品明细表格
2、全部商品列表数据

3、暂存选中商品数组 checkGoods，这个进行编辑的时候用处就体现出来了

一、设置表格分页多选功能

1、将表格进行属性设置，表格设置 :row-key=“getRowKeys” @selection-change=“handleSelectionChange” 选择列进行多选设置 :reserve-selection=“true”

<el-table
        ref="multipleTable"
        :data="goodsTableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          type="selection"
          width="55"
          :reserve-selection="true"
        >
        </el-table-column>
</el-table>

2、编写方法

	//根据你要绑定的值进行返回一般是id，我这边是goodsId
	getRowKeys(row) {
      return row.goodsId;
    },

    // 弹窗选中商品进行赋值
    handleSelectionChange(selection) {
      // 如果是反显选中操作 不做处理
      if (this.toggleRowSelect) {
        return;
      }
      this.checkGoods = selection;
    },

二、分页获取数据将选中的值进行选中

这里有一点是编辑和新增放到了一起，所以需要判断checkGoods的长度，编辑的时候tableData是有值的，但是还没进行选择，所以checkGoods没值，选中设置数组就应该使用tableData。新增的时候就不用考虑这些

// 获取列表数据
    getDataList() {
      this.chooseGoodsForm.houseId = this.form.houseId;
	//这是我的请求方法
      this.$http("/jxc/base/baseGoods/houseList", "GET", this.chooseGoodsForm).then(
        (res) => {
          if (res && res.code == 200) {
            this.goodsTableData = res.result.records;
            this.total = res.result.total;
            // 这里需要加个判断，如果checkGoods没值，说明是将暂存的数据放到弹窗的商品默认选中，如果checkGoods有值，说明选择商品弹窗已经进行选择操作
            let arr =
              this.checkGoods.length > 0 ? this.checkGoods : this.tableData;
			//--------------------------------------------------------------
            this.$nextTick(() => {
              this.toggleRowSelect = true; // 记录是否是反显选中操作，因为选中改变会触发@selection-change事件
              // tableData当页数据 multipleSelection需要反显的数据（已经选中的）
              this.$refs.multipleTable &&
                this.goodsTableData.forEach((row) => {
                  //将id一致的进行选中设置
                  let selectRow = arr.find(
                    (item) => item.goodsId === row.goodsId
                  );
                  // 注意：toggleRowSelection传的row一定是表格数据中的某一行数据
                  this.$refs.multipleTable.toggleRowSelection(
                    row,
                    selectRow ? true : false
                  );
                });
              this.toggleRowSelect = false;
              //---------------------------------------------------------------------------
            });
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        }
      );
    },

三、保存选中的商品

我这里需要设置一个盘点数量默认值，这里有两种情况，一种是直接保存，另外一种是我已经选择好了商品，并且已经将商品数量进行了更改，再次打开弹窗选中该商品时，盘点数量默认值应该展示修改后的的值。看图理解一下
1、默认实盘数量和商品数量是一致的

2、我修改数量后再次选择该商品，实盘数量展示我修改后的值

代码

// 确定选择商品
    chooseGoodsConfirm() {
      let arr = JSON.parse(JSON.stringify(this.checkGoods));
      let arr1 = JSON.parse(JSON.stringify(this.tableData));
      let arr2 = [];
      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        // 如果原来的数组中包含该商品，则使用原来的值
        if (this.getObj(element.goodsId, arr1)) {
          let obj = this.setObj(element.goodsId, arr1)[0];

          arr2.push(obj);
        } else {
          // 如果没有设置默认值
          element.profitLossNums = 0; //盈亏数量
          element.checkNums = element.actualCounts; //实盘数量
          element.curNums = element.actualCounts; //当时库存数量
          element.amount = 0; //盈亏金额
          this.actualCountsChange(element);
          arr2.push(element);
        }
      }
      this.tableData = JSON.parse(JSON.stringify(arr2));

      this.dialogChooseGoods = false;
    },
    // 根据id判断数组中是否含有对象
    getObj(id, arr) {
      return arr.some((value) => {
        return value.goodsId == id;
      });
    },
    // 根据id返回数组中含有对象
    setObj(id, arr) {
      let arr1 = [];
      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        if (element.goodsId == id) {
          arr1.push(element);
        }
      }
      return arr1;
    },

四、选中商品删除

代码

// 表格删除按钮
    tableDelBtn(id) {
      this.tableData = this.tableData.filter((item) => {
        return item.goodsId != id;
      });
      this.checkGoods = this.checkGoods.filter((item) => {
        return item.goodsId != id;
      });
    },

五、结语

总体来讲，复杂的地方就是编辑的时候，就是将暂存的数据拿过来，放进商品明细列表后，再选择商品设置选中，默认数量不变。

如有更简洁的方法，欢迎指教，共同进步