element根据输入动态生成表格的示例代码

<template xmlns="">
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px" autocomplete="off" @submit.native.prevent>
      <h3>基础信息</h3>
      <div style="padding-left: 60px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="spu_id">
              <el-input v-model="form.id" autocomplete="off" placeholder="" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="名称" :required="true">
              <el-input v-model="form.goods_name" autocomplete="off" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="商品类型" :required="true">
              <el-select v-model="form.goods_type" placeholder="请选择">
                <el-option
                  v-for="item in goodstypeoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="品牌" :required="true">
              <el-select v-model="form.brand_code" style="width: 100%">
                <el-option
                  v-for="item in brandoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="分类" :required="true">
              <el-cascader
                v-model="form.cate_code"
                collapse-tags
                clearable
                :options="cateoptions"
                :props="{ multiple: false, checkstrictly: true }"
                filterable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="赠品" :required="true">
              <el-radio v-model="form.is_gift" label="1">否</el-radio>
              <el-radio v-model="form.is_gift" label="2">是</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="列表显示" :required="true">
              <el-radio v-model="form.is_show_video" label="1">是</el-radio>
              <el-radio v-model="form.is_show_video" label="2">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="是否套组" :required="true">
              <el-radio v-model="form.is_suite" label="1">否</el-radio>
              <el-radio v-model="form.is_suite" label="2">是</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="是否预售" :required="true">
              <el-radio v-model="form.is_pre_sales" label="1">否</el-radio>
              <el-radio v-model="form.is_pre_sales" label="2">是</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="是否临期" :required="true">
              <el-radio v-model="form.is_expire" label="1">否</el-radio>
              <el-radio v-model="form.is_expire" label="2">是</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="包装规格">
              <el-input v-model="form.pack_spec" autocomplete="off" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="包装数量">
              <el-input v-model="form.pack_count" autocomplete="off" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="销售单位">
              <el-input v-model="form.unit_name" autocomplete="off" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="保质期">
              <el-date-picker
                v-model="form.expire_date"
                type="date"
                value-format="yyyy-mm-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品图片" :required="true">
              <ul class="el-upload-list el-upload-list--picture-card">
                <vuedraggable v-model="form.images">
                  <li v-for="(item, index) in form.images" :key="index" class="el-upload-list__item is-success animated">
                    <img :src="item" alt="" class="el-upload-list__item-thumbnail ">
                    <i class="el-icon-close" />
                    <span class="el-upload-list__item-actions">
                      <!-- 预览 -->
                      <span class="el-upload-list__item-preview" @click="viewimage(item)">
                        <i class="el-icon-zoom-in" />
                      </span>
                      <!-- 删除 -->
                      <span class="el-upload-list__item-delete" @click="delimage(index)">
                        <i class="el-icon-delete" />
                      </span>
                    </span>
                  </li>
                </vuedraggable>
              </ul>
              <!--            <el-button size="small" type="info" @click="uploadimagedialog = true">点击上传</el-button>-->
              <label for="upload-btn" class="el-button el-button--info el-button--mini">上传文件</label>
              <input
                v-show="false"
                id="upload-btn"
                ref="uploadbtn"
                type="file"
                accept="image/png, image/jpeg, image/gif, image/jpg"
                @change="loadimg($event)"
              >
              <div class="el-upload__tip">第1张为主图,其它为从图.尺寸800*800</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="推荐语">
              <el-input v-model="form.recommendation" autocomplete="off" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述" :required="true">
              <tinymce v-model="form.description" :height="300" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保管事项">
              <el-select v-model="form.keep_desc_tpl_id" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in keepoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="温馨提示">
              <el-select v-model="form.notice_desc_tpl_id" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in noticeoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <h3>sku信息</h3>
      <div style="padding-left: 60px">
        <sku-edit ref="skuedit" />
      </div>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <router-link style="padding-left: 10px;" to="/goods/erp-goods-list">
          <el-button>返回列表</el-button>
        </router-link>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="imageviewdialog">
      <img width="100%" :src="imageviewurl" alt="">
    </el-dialog>
    <el-dialog
      width="700px"
      custom-class="image-upload"
      :visible.sync="croperimagedialog"
      :close-on-click-modal="false"
      @close="emptyupload"
    >
      <div style="display:flex;justify-content: center;">
        <cropper ref="mycropper" @updateimagelist="updateimagelist" />
      </div>
      <div slot="footer">
        <div class="dialog-footer-btn">
          <div>
            <el-button @click="croperimagedialog = false">返 回</el-button>
            <el-button type="primary" @click="cropimg">确 定</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { spucreate, spudetail } from '@/api/goods/goods'
import { getoptions, uploadurl } from '@/api/common/common'
import { empty } from '@/utils/index'
import tinymce from '@/components/tinymce/index.vue'
import skuedit from '@/views/goods/goods/sku_edit.vue'
import { gettoken } from '@/utils/auth'
import vuedraggable from 'vuedraggable'
import cropper from '@/views/goods/component/cropper.vue'
export default {
  name: 'goodsedit',
  components: { tinymce, vuedraggable, cropper, skuedit },
  props: ['id'],
  data() {
    return {
      salesamountlimit: 1,
      uploadimagedialog: false,
      croperimagedialog: false,
      imageviewdialog: false,
      imageviewurl: false,
      uploadurl: uploadurl,
      cropperdialogvisible: false,
      tagoptions: [],
      keepoptions: [],
      noticeoptions: [],
      uppy: {},
      cateoptions: [],
      brandoptions: [],
      goodstypeoptions: [],
      uploadheaders: {
        token: gettoken()
      },
      lefttagfilelist: [],
      righttagfilelist: [],
      form: {},
      copy: false,
      initform: {
        id: '',
        goods_name: '',
        barcode: '',
        cate_code: '',
        brand_code: '',
        description: '',
        images: [],
        pack_spec: '',
        pack_count: '',
        unit_name: '',
        expire_date: '',
        video: '',
        is_expire: '1',
        is_gift: '1',
        is_pre_sales: '1',
        video_cover: '',
        is_show_video: '1',
        recommendation: '',
        goods_type: '1',
        is_suite: '1',
        merchant_id: '',
        keep_desc_tpl_id: '',
        notice_desc_tpl_id: '',
        sku_map_list: [],
        spu_attrs: []
      }
    }
  },
  computed: {},
  watch: {
    'form.left_tag_type': {
      deep: true,
      handler(newval, oldval) {
        if ((newval === 7 && oldval !== 7) || (newval !== 7 && oldval === 7)) {
          this.form.left_tag = ''
          this.lefttagfilelist = []
        }
      }
    },
    'form.right_tag_type': {
      deep: true,
      handler(newval, oldval) {
        if ((newval === 7 && oldval !== 7) || (newval !== 7 && oldval === 7)) {
          this.form.right_tag = ''
          this.righttagfilelist = []
        }
      }
    }
  },
  mounted() {
    if (this.$route.query.copy) {
      this.copy = json.parse(this.$route.query.copy)
    }
  },
  activated() {
    this.form = json.parse(json.stringify(this.initform))
    this.detail()
    getoptions({ option_names: [
      'cateoptions', 'brandoptions', 'goodstypeoptions', 'goodsdesctploption', 'goodskeeptploption'] }).then(response => {
      this.goodstypeoptions = response.data.goodstypeoptions
      this.cateoptions = response.data.cateoptions
      this.brandoptions = response.data.brandoptions
      this.keepoptions = response.data.goodskeeptploption
      this.noticeoptions = response.data.goodsdesctploption
    })
  },
  methods: {
    async save() {
      // 获取 skuedit 子组件 的信息
      this.form.sku_map_list = this.$refs.skuedit.spuinfo.sku_map_list
      // is_draft =1 为草稿数据 2-为审核通过的数据
      this.form.is_draft = 2
      await spucreate(this.form)
      this.$message({
        message: '保存成功,待审核!',
        type: 'success'
      })
      this.form = json.parse(json.stringify(this.initform))
      this.$router.push({ path: '/goods/goods/draft-list' })
    },
    detail() {
      const id = this.$route.query.id
      const params = {}
      params.id = id
      if (empty(id)) {
        return
      }
      spudetail(params).then(response => {
        this.form = response.data
        this.$refs.skuedit.spuinfo.sku_map_list = this.form.sku_map_list
        this.$refs.skuedit.spuattrs = this.form.spu_attrs
        this.form.is_expire = this.form.is_expire.tostring()
        this.form.is_gift = this.form.is_gift.tostring()
        this.form.is_show_video = this.form.is_show_video.tostring()
        this.form.is_suite = this.form.is_suite.tostring()
        this.form.is_pre_sales = this.form.is_pre_sales.tostring()
        this.form.is_expire = this.form.is_expire.tostring()
        if (this.copy) {
          this.form.id = ''
        }
      })
    },
    viewimage(item) {
      this.imageviewurl = item.url
      this.imageviewdialog = true
    },
    delimage(index) {
      this.form.images.splice(index, 1)
    },
    loadimg(e) {
      const file = e.target.files[0]
      if (file.size / 1024 / 1024 > 5) {
        this.$message.error('上传文件不能超过5m')
        return false
      }
      if (!/\.(jpg|png|gif|jpg|png|gif|)$/.test(file.name)) {
        this.$message.info('图片类型必须是jpg,png的一种')
        return false
      }
      const reader = new filereader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          data = window.url.createobjecturl(new blob([e.target.result]))
        } else {
          data = e.target.result
        }
        this.croperimagedialog = true
        this.$nexttick(() => {
          this.$refs.mycropper.imgload(file, data)
        })
      }
      reader.readasarraybuffer(file)
    },
    emptyupload() {
      this.$refs.uploadbtn.value = ''
    },
    cropimg() {
      this.$refs.mycropper.crop()
    },
    updateimagelist(item) {
      this.form.images.push(item.url)
      this.croperimagedialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  overflow-y: auto;
  height: 100%;
}
.app-container >>> .cropper-modal {
  opacity: 0.5;
}
el-input {
  width: 300px;
}
</style>

<template>
  <div class="">
    <el-form ref="skuedit" label-width="110px">
      <el-form-item label="spu规格" required>
        <vuedraggable v-model="spuattrs" @start="onstart" @end="onend">
          <transition-group>
            <template v-for="(item, index) in spuattrs">
              <div :key="index" :class="(index < (spuattrs.length - 1)) ? 'attr_select_index' : '' ">
                <div>
                  <el-select
                    v-model="item.attr"
                    filterable
                    allow-create
                    placeholder="选择或创建"
                    size="mini"
                    @blur="addattr($event,item,index)"
                    @change="changeattr($event, index)"
                  >
                    <el-option
                      v-for="(cateitem, cateindex) in cateattrs"
                      :key="cateindex"
                      :label="cateitem.label"
                      :value="cateindex"
                    />
                  </el-select>
                  <i :key="index" class="item el-icon-sort" @mouseover="showtooltipspec" @mouseleave="hidetooltipspec" />
                  <span v-if="tooltipvisiblespec&&index===0">拖动上下排序</span>
                  <i :key="index" class="el-icon-circle-plus attr_options_add" @click="spuattritem(1, index + 1)" />
                  <i v-if="spuattrs.length>1" :key="index" class="el-icon-remove attr_options_del" @click="spuattritem(2,index)" />
                </div>
                <div style="margin-left: 20px">
                  <vuedraggable v-model="item.values" @start="onstart" @end="onend">
                    <transition-group style="display: flex; flex-wrap: wrap;">
                      <template v-for="(attrval,vi) in item.values">
                        <div :key="vi">
                          <div style="margin-left: 15px">
                            <el-input
                              v-model="item.values[vi]"
                              placeholder="添加规格值"
                              size="mini"
                              style="width: 100px;"
                              @blur="addattrvalue($event,index, vi)"
                            />
                            <template>
                              <i
                                :key="vi"
                                class="item el-icon-s-operation"
                                @mouseover="showtooltipspecvalue"
                                @mouseleave="hidetooltipspecvalue"
                              />
                              <span v-if="tooltipvisiblespecvalue&&vi===0&&index===0">拖动左右排序</span>
                              <i
                                :key="vi"
                                class="el-icon-circle-plus attr_val_options_add"
                                @click="spuattrvalueitem(1,index)"
                              />
                              <i
                                v-if="item.values.length>1"
                                :key="vi"
                                class="el-icon-remove attr_val_options_del"
                                @click="spuattrvalueitem(2,index,vi)"
                              />
                            </template>
                          </div>
                        </div>
                      </template>
                    </transition-group>
                  </vuedraggable>
                </div>
              </div>
            </template>
          </transition-group>
        </vuedraggable>
      </el-form-item>
      <el-form-item label="映射sku" required>
        <el-table
          :data="spuinfo.sku_map_list"
          border
          :header-row-style="tableheaderrowstyle"
          :header-cell-style="tableheadercellstyle"
          :max-height="tableheight"
          size="mini"
          style="width: 100%"
          empty-text="暂无数据"
        >
          <el-table-column
            v-for="(item,index) in spuattrs"
            :key="index"
            :label="item.attr"
          >
            <template slot-scope="scop">
              <div>{{ getattrvalue(scop.row, index) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="barcode"
            label="商品条码"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.barcode"
                size="mini"
                placeholder="请输入商品条码"
                @blur="addbarcode($event,scope.row,scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="售价"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.price"
                size="mini"
                placeholder="请输入商品售价"
                @blur="addprice($event,scope.row,scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="market_price"
            label="市场价"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.price"
                size="mini"
                placeholder="请输入商品市场价"
                @blur="addmarketprice($event,scope.row,scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="image"
            label="图片"
            width="100"
          >
            <template slot-scope="scope">
              <el-upload
                class="avatar-uploader"
                :action="uploadurl+'?type=image'"
                :limit="1"
                :show-file-list="false"
                :on-success="(res,file,filelist) => {handleavatarsuccess(res,file,filelist,scope.$index)}"
                :headers="uploadheaders"
              >
                <img v-if="scope.row.image!=''" :src="scope.row.image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import vuedraggable from 'vuedraggable'
import { getoptions, uploadurl } from '@/api/common/common'
import { spudetail, savespu } from '@/api/goods/spu'
import { empty } from '@/utils'
import common from '@/layout/mixin/common'
import { gettoken } from '@/utils/auth'
export default {
  name: 'skuedit',
  components: {
    'vuedraggable': vuedraggable
  },
  mixins: [common],
  props: ['spu_id'],
  data() {
    return {
      // 1-为规格 2-为规格值
      changetype: 1,
      // 变化内容
      changecontent: '',
      drag: false,
      tooltipvisiblespec: false,
      tooltipvisiblespecvalue: false,
      uploadurl: uploadurl,
      spuinfo: {
        sku_map_list: []
      },
      uploadheaders: {
        token: gettoken()
      },
      cateattrs: [],
      cateattrcount: 0,
      spuattrs: [],
      selectmapskuvisible: false,
      skulistloading: false,
      skulist: [],
      barcode: '',
      goodsname: '',
      selectskupage: 1,
      selectskupagesize: 30,
      selectskutotal: 0,
      selectskumapindex: -1
    }
  },
  mounted() {
    getoptions({ option_names: ['spuspecoptions'] }).then(response => {
      this.cateattrs = response.data.spuspecoptions
    })
    if (!empty(this.spu_id)) {
      this.spuinfo.id = this.spu_id
      spudetail({ id: this.spu_id }).then(res => {
        this.cateattrcount = object.keys(this.cateattrs).length
        this.spuinfo.sku_map_list = res.data.sku_map_list
        this.spuattrs = res.data.spu_attrs
        this.$refs.imagecropperupload.setimage([{ path: this.spuinfo.image, url: this.spuinfo.image_url }])
      })
    }
    if (empty(this.spuattrs)) {
      this.spuattrs = [
        {
          attr: '',
          values: ['']
        }
      ]
    }
  },
  methods: {
    empty,
    showtooltipspec() {
      console.log('showtooltipspec','----------')
      settimeout(() => {
        this.tooltipvisiblespec = true
      }, 1000)
    },
    hidetooltipspec() {
      console.log('hidetooltipspec','----------')
      this.tooltipvisiblespec = false
    },
    showtooltipspecvalue() {
      console.log('showtooltipspecvalue','----------')
      settimeout(() => {
        this.tooltipvisiblespecvalue = true
      }, 1000)
    },
    hidetooltipspecvalue() {
      console.log('hidetooltipspecvalue','----------')
      this.tooltipvisiblespecvalue = false
    },
    onstart() {
      this.drag = true
    },
    handleavatarsuccess(res, file, filelist, index) {
      this.spuinfo.sku_map_list[index].image = res.data[0].url
    },
    // 添加规格
    addattr(e, item, index) {
      if (empty(e.target.value)) {
        return
      }
      this.spuattrs.push({
        attr: e.target.value,
        values: ['']
      })
      // 判断this.spuattrs.attr 是否有空值，如果有空值则删除
      for (let i = 0; i < this.spuattrs.length; i++) {
        if (empty(this.spuattrs[i].attr)) {
          this.spuattrs.splice(i, 1)
        }
      }
    },
    addbarcode(e, row, index) {
      this.spuinfo.sku_map_list[index].barcode = e.target.value
    },
    addprice(e, row, index) {
      this.spuinfo.sku_map_list[index].price = e.target.value
    },
    addmarketprice(e, row, index) {
      this.spuinfo.sku_map_list[index].market_price = e.target.value
    },
    addattrvalue(e, index, vi) {
      if (empty(e.target.value)) {
        return
      }
      this.attrskumap(1, index, this.spuattrs[index].values.length - 1)
    },
    onend() {
      this.drag = false
      this.attrskumap(3, 0, 0)
    },
    // 选择规格名
    changeattr(e, index) {
      this.spuattrs[index].values = ['']
      this.spuattrs[index].attr = this.cateattrs[index].label
      this.attrskumap(3, index, -1)
    },
    spuattritem(type, index) {
      if (type === 1) {
        this.spuattrs.push({
          attr: '',
          values: ['']
        })
      } else {
        this.changetype = 1
        this.changecontent = this.spuattrs[index].attr
        this.spuattrs.splice(index, 1)
      }
      this.attrskumap(type, index, type === 1 ? 0 : 1)
    },
    // 添加|删除规格值
    spuattrvalueitem(type, pindex, subindex) {
      if (type === 1) {
        this.spuattrs[pindex].values.push('')
      } else {
        this.changetype = 2
        this.changecontent = this.spuattrs[pindex].values[subindex]
        this.spuattrs[pindex].values.splice(subindex, 1)
      }
      this.attrskumap(type, pindex, subindex)
    },
    // 生成sku组合表格,处理每行数据x
    generatecombinations(type, pindex, subindex, changeindex = 0, spliceindex = -1, currentcombination = [], index = 0) {
      if (index >= this.spuattrs.length) {
        // 1-新增，2-删除，3-修改
        if (type === 1) {
          // 页面新开 新增的sku情况
          if (empty(this.spuinfo.sku_map_list[changeindex])) {
            this.spuinfo.sku_map_list.push({
              barcode: '',
              price: '',
              market_price: '',
              attrs: [],
              image: ''
            })
            // attrs  字段与页面显示无关,只为传给后端使用
            for (let j = 0; j < currentcombination.length; j++) {
              this.spuinfo.sku_map_list[changeindex].attrs.push({
                attr: currentcombination[j].attr,
                value: currentcombination[j].value
              })
            }
            // 页面新开 编辑的sku情况
          } else if (currentcombination.length === this.spuinfo.sku_map_list[changeindex].attrs.length) {
            for (let j = 0; j < currentcombination.length; j++) {
              this.spuinfo.sku_map_list[changeindex].attrs[j].attr = currentcombination[j].attr
              this.spuinfo.sku_map_list[changeindex].attrs[j].value = currentcombination[j].value
            }
          } else if (currentcombination.length > this.spuinfo.sku_map_list[changeindex].attrs.length) {
            const item = currentcombination.slice(-1)
            this.spuinfo.sku_map_list[changeindex].attrs.push({
              attr: item.attr,
              value: item.value
            })
          }
        } else if (type === 2) {
          // 遍历currentcombination,把value 拼接组合，后面在循环中删除多余重复的行
          if (this.changetype === 1) {
            let currentcombinationvalue = ''
            for (let j = 0; j < currentcombination.length; j++) {
              currentcombinationvalue += currentcombination[j].value + '_'
            }
            for (let k = 0; k < this.spuinfo.sku_map_list.length; k++) {
              if (empty(this.spuinfo.sku_map_list[k])) {
                continue
              }
              for (let j = 0; j < this.spuinfo.sku_map_list[k].attrs.length; j++) {
                if (empty(this.spuinfo.sku_map_list[k].attrs[j])) {
                  continue
                }
                if (this.changecontent === this.spuinfo.sku_map_list[k].attrs[j].attr
                ) {
                  // 删除规格
                  this.spuinfo.sku_map_list[k].attrs.splice(j, 1)
                  // 组合规格值
                  let itemvaluecombination = ''
                  for (let m = 0; m < this.spuinfo.sku_map_list[k].attrs.length; m++) {
                    itemvaluecombination += this.spuinfo.sku_map_list[k].attrs[m].value + '_'
                  }
                  this.spuinfo.sku_map_list[k].combination = itemvaluecombination
                }
              }
            }
            for (let v = 0; v < this.spuinfo.sku_map_list.length; v++) {
              let count = 0
              if (empty(this.spuinfo.sku_map_list[v])) {
                continue
              }
              if (currentcombinationvalue === this.spuinfo.sku_map_list[v].combination) {
                count++
              }
              // 相同规格的行只保留一条
              if (count > 1) {
                this.spuinfo.sku_map_list.splice(v, 1)
              }
            }
          } else {
            for (let k = 0; k < this.spuinfo.sku_map_list.length; k++) {
              if (empty(this.spuinfo.sku_map_list[k]) || empty(this.spuinfo.sku_map_list[k].attrs)) {
                continue
              }
              const attrs = this.spuinfo.sku_map_list[k]?.attrs || []
              for (let j = 0; j < attrs.length; j++) {
                if (this.empty(attrs[j])) {
                  continue
                }
                if (this.changecontent === attrs[j].value) {
                  // 删除整行
                  this.spuinfo.sku_map_list.splice(k, 1)
                  break // 如果删除了当前行，需要跳出循环
                }
              }
            }
          }
        } else {
          for (let j = 0; j < currentcombination.length; j++) {
            this.spuinfo.sku_map_list[changeindex].attrs[j].attr = currentcombination[j].attr
            this.spuinfo.sku_map_list[changeindex].attrs[j].value = currentcombination[j].value
          }
        }
        changeindex++
        spliceindex = -1
        // return 之后执行 this.generatecombinations 的逻辑
        return [changeindex, spliceindex]
      }
      // 规格和规格值都遍历
      for (var i = 0; i < this.spuattrs[index].values.length; i++) {
        currentcombination.push({
          attr: this.spuattrs[index].attr,
          value: this.spuattrs[index].values[i]
        })
        // 假如有 尺寸 s m ,颜色 黄色 白色
        // 第一次遍历生成 {"attr":"尺寸","value":"s"}
        // 第二次遍历生成 {"attr":"尺寸","value":"s"},{"attr":"颜色","value":"黄色"}组合,然后在渲染到表格的第一行中
        // changeindex 为行数或者组合数量
        // generatecombinations 自循环,遇到return [changeindex, spliceindex]后才往下执行
        const res = this.generatecombinations(type, pindex, subindex, changeindex, spliceindex, currentcombination, index + 1)
        changeindex = res[0]
        spliceindex = res[1]
        currentcombination.pop()
      }
      return [changeindex, spliceindex]
    },
    attrskumap(type, pindex, subindex) {
      this.generatecombinations(type, pindex, subindex)
      return
    },
    getattrvalue(item, i) {
      return item.attrs[i].value
    },
    async savespu() {
      return await savespu(this.spuinfo)
    }
  }
}
</script>
<style scoped lang="scss">
.cate_level1 {
  color: #e6a23c;
}
.attr_select_index {
  margin-bottom: 14px;
}
.attr_options_add, .attr_val_options_add {
  margin-left: -2px;
  font-size: 20px;
  color: #409eff;
  cursor: pointer;
}
.item {
  padding: 3px;
  //background-color: #fdfdfd;
  //border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
.item:hover {
  background-color: #f1f1f1;
  cursor: move;
}
.chosen {
  border: solid 2px #3089dc !important;
}
.attr_options_del, .attr_val_options_del {
  margin-left: -2px;
  font-size: 20px;
  color: #f56c6c;
  cursor: pointer;
}
.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip-text {
  visibility: visible;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* position the tooltip above the icon */
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.avatar {
  width: 30px;
  height: 30px;
  display: block;
}
</style>

{
    "msg": "ok",
    "code": 10000,
    "data": {
        "id": "710432902999261184",
        "goods_name": "spu测试ywz",
        "cate_code": "lthg98",
        "brand_code": "upsphd",
        "supplier_code": "",
        "audit_status": 1,
        "pack_spec": "101",
        "pack_count": "102",
        "unit_name": "103",
        "expire_date": "2024-10-24",
        "images": [
            "https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/c7865c97174a4eb92519edd42a98af74851785.png",
            "https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/4508beb29e17b950796cc5961a88b520299817.png"
        ],
        "video": "",
        "video_cover": "",
        "is_show_video": 1,
        "description": "<p>spu测试spu测试spu测试<\/p>",
        "sort": 0,
        "is_gift": 1,
        "goods_type": 1,
        "sales_count": 0,
        "is_sales_amount_limit": 1,
        "recommendation": "spu测试spu测试spu测试",
        "is_search": 1,
        "is_pre_sales": 1,
        "is_expire": 1,
        "is_suite": 1,
        "merchant_id": 1,
        "business_type": 1,
        "keep_desc_tpl_id": 2,
        "notice_desc_tpl_id": 0,
        "del_status": 1,
        "create_time": "2024-10-31 10:06:43",
        "update_time": "2024-10-31 10:06:43",
        "sku_map_list": [
            {
                "id": 710432903292862464,
                "spu_id": "710432902999261184",
                "goods_code": "",
                "barcode": "spu_1234561345678ywz1",
                "image": "https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/c7865c97174a4eb92519edd42a98af74851785.png",
                "search_weight": 0,
                "sort": 0,
                "sales_count": 0,
                "price": "99.00",
                "market_price": "199.00",
                "cost_price": "0.00",
                "create_time": "2024-10-31 10:06:43",
                "update_time": "2024-10-31 10:06:43",
                "attrs": [
                    {
                        "attr": "尺寸",
                        "value": "尺寸1"
                    },
                    {
                        "attr": "颜色",
                        "value": "颜色1"
                    }
                ]
            },
            {
                "id": 710432903292862465,
                "spu_id": "710432902999261184",
                "goods_code": "",
                "barcode": "spu_12345631345678ywz1",
                "image": "https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/c7865c97174a4eb92519edd42a98af74851785.png",
                "search_weight": 0,
                "sort": 0,
                "sales_count": 0,
                "price": "99.00",
                "market_price": "199.00",
                "cost_price": "0.00",
                "create_time": "2024-10-31 10:06:43",
                "update_time": "2024-10-31 10:06:43",
                "attrs": [
                    {
                        "attr": "尺寸",
                        "value": "尺寸1"
                    },
                    {
                        "attr": "颜色",
                        "value": "颜色2"
                    }
                ]
            },
            {
                "id": 710432903292862466,
                "spu_id": "710432902999261184",
                "goods_code": "",
                "barcode": "spu_123456451345678ywz1",
                "image": "https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/c7865c97174a4eb92519edd42a98af74851785.png",
                "search_weight": 0,
                "sort": 0,
                "sales_count": 0,
                "price": "99.00",
                "market_price": "199.00",
                "cost_price": "0.00",
                "create_time": "2024-10-31 10:06:43",
                "update_time": "2024-10-31 10:06:43",
                "attrs": [
                    {
                        "attr": "尺寸",
                        "value": "尺寸2"
                    },
                    {
                        "attr": "颜色",
                        "value": "颜色1"
                    }
                ]
            },
            {
                "id": 710432903292862467,
                "spu_id": "710432902999261184",
                "goods_code": "",
                "barcode": "spu_123456561345678ywz1",
                "image": "https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/c7865c97174a4eb92519edd42a98af74851785.png",
                "search_weight": 0,
                "sort": 0,
                "sales_count": 0,
                "price": "99.00",
                "market_price": "199.00",
                "cost_price": "0.00",
                "create_time": "2024-10-31 10:06:43",
                "update_time": "2024-10-31 10:06:43",
                "attrs": [
                    {
                        "attr": "尺寸",
                        "value": "尺寸2"
                    },
                    {
                        "attr": "颜色",
                        "value": "颜色2"
                    }
                ]
            }
        ],
        "spu_attrs": [
            {
                "attr": "尺寸",
                "values": [
                    "尺寸1",
                    "尺寸2"
                ]
            },
            {
                "attr": "颜色",
                "values": [
                    "颜色1",
                    "颜色2"
                ]
            }
        ]
    },
    "log_id": "710498316961951744"
}