sku商品规格设置，价格与库存表

//初始的商品规格
initSpec() {
   let goods5List = [];
   let obj = {
        selectedName: "", //规格名
        selectedValue: "", //多选选中规格值
        checkedImg: "",//是否已选规格图片
        selectedSpecValue: [], //规格和规格值选中列表
        specValueList: [], //规格值初始数据
      };
      goods5List.push(obj);
      this.goods5List = goods5List;
 }

 根据商品规格得到价格与库存表

// 得到价格与库存table表
    priceInventoryTable() {
      // 得到规格值二维数组
      const specValueList = this.goods5List
        .filter(
          (item) => item.selectedSpecValue && item.selectedSpecValue.length
        )
        .map((ite) => ite.selectedSpecValue);
      let priceInventoryList = [];
      if (!specValueList.length) {
        return;
      }
      // 笛卡尔积算法
      let skuArray = specValueList.reduce(
        (pre, next) => {
          let newArr = [];
          pre.forEach((item1) => {
            next.forEach((item2) => {
              newArr.push(item1.concat([item2]));
              return newArr;
            });
          });
          return newArr;
        },
        [[]]
      );
      priceInventoryList = skuArray.map((item) => {
        let obj = {
          price: "",
          spotStock: "",
          skuidNumber: "",
          barCode: "",//图片
          specArr:[]//已选规格值
        };
        item.map((ite, index) => {
          if(ite.specValue || ite.specName) {
            obj["specArr"].push(ite)
          }
          if (ite.specImage && ite.specImage.length > 0) {
            obj["barCode"] = ite.specImage[0].imageUrl;
          }
        });
        return obj;
      });
      this.priceInventoryList = priceInventoryList;
    },

批量设置价格与库存：在进行选择规格值时，对应specArr数组内的相对应的规格值进行batch标记为true

<div>
        <el-checkbox v-model="batchSetting">批量设置</el-checkbox>
        <div class="me-fx-row-start-c batch_content" v-show="batchSetting">
            <div v-for="(item,index) in batchOptions" :key="item.selectedName">
                <my-select
                    v-if="item.selectedName"
                    :value.sync="item.selectedValue"
                    :clearable="true"
                    :options="item.selectedSpecValue"
                    :valueType="true"
                    @change="selectedValueChange($event,index)"
                />
            </div>
            <el-input v-model.trim="batchValue.price" placeholder="价格" type="number"></el-input>
            <el-input v-model.trim="batchValue.spotStock" placeholder="预售可售库存" type="number"></el-input>
            <el-input v-model.trim="batchValue.skuidNumber" placeholder="商品编码" type="number"></el-input>
            <el-button type="primary" plain size="medium" @click="handleBatchSetting">设置</el-button>
        </div>
      </div>

<el-table
            v-if="tableDatas.length > 0"
            :data="tableDatas"
            border
            style="width: 100%; margin-top: 1.5em"
          >
            <el-table-column
              v-for="(item, index) in filterGoods5List"
              :key="index"
              :label="item.selectedName"
              align="center"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.specArr.length > 0 && scope.row.specArr[index].specValue
                  "
                >
                  {{ scope.row.specArr[index].specValue }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="价格" align="center">
              <template slot-scope="scope">
                <el-input
                  placeholder="请填写价格"
                  v-model.trim="scope.row.price"
                  type="number"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="预售可售库存" align="center">
              <template slot-scope="scope">
                <el-input
                  placeholder="请填写预售可售库存"
                  v-model.trim="scope.row.spotStock"
                  type="number"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="商家编码" align="center">
              <template slot-scope="scope">
                <el-input
                  placeholder="请填写商家编码"
                  v-model.trim="scope.row.skuidNumber"
                  type="number"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="预览图" align="center">
              <template slot-scope="scope">
                <img class="img_box" v-if="scope.row.barCode" :src="baseUrl + scope.row.barCode" alt="预览图" />
              </template>
            </el-table-column>
          </el-table>

selectedValueChange(e,key) {
        // 批量规格值选择缓存batchSelectedValue
        this.batchSelectedValue.splice(key,1,e)
        this.tableDatas.forEach((item,i) => {
            item.specArr.forEach((ite,index) => {
                if(this.batchSelectedValue[index] && this.batchSelectedValue[index].valName                 && ite.specValue == this.batchSelectedValue[index].valName) {
                    item.specArr[index]["batch"] = true
                } else if(this.batchSelectedValue[index] && this.batchSelectedValue[index].valName && this.batchSelectedValue[index].valName == `全部${ite.specName}`) {
                    // 为table表格数据标记具有全部的规格值
                    item.specArr[index]["batch"] = true
                } else {
                    item.specArr[index]["batch"] = false
                }
            })
        })
    },

// 批量设置
    handleBatchSetting() {
        const {price,spotStock,skuidNumber} = this.batchValue
        let flag = this.batchOptions.every(item => !item.selectedValue)
        if(flag) {
            this.$message.warning("请先选择需要进行批量设置的规格值！")
            return
        }
        this.tableDatas.forEach((item,i) => {
            let batchFlag = item.specArr.every(ite => ite.batch)
            if(batchFlag) {
                Object.assign(item,{
                    price,
                    spotStock,
                    skuidNumber
                })
            }
        })
    }