一个提示框里面的sku表单

<el-form ref="form" :model="skuForm" label-width="120px">
        <!-- 下拉选择商品分类 -->
        <el-form-item label="选择商品分类：">
          <el-select v-model="value" placeholder="选择商品分类：" @change="changeValue">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <div style="float:right">
            <el-button type="primary" size="small" @click="addSkuInfo">新增属性</el-button>
          </div>
        </el-form-item>
        <!-- 勾选sku信息 -->
        <el-form-item v-for="(sku, key) in category_bind_attr" :key="key" :label="sku.sku_key_name">
          <el-card class="checkedItemColor">
            <el-checkbox-group v-model="sku.sku_value_id" @change="handleCheckedChange">
              <el-checkbox v-for="(sku_Item, sku_key) in sku.sku_group" :key="sku_key" :label="sku_Item.id">{{
                sku_Item.sku_value_name
              }}</el-checkbox>
            </el-checkbox-group>
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getEditClassSku">提 交</el-button>
          <el-button @click="editBrandClassSkuVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>

import { cateAttrInfo, skuInfo, editCateAttr } from '@/api/quote'

独立数据源

data:{
category_bind_attr: [],
}

点击展开获取到信息

  async seletedClassSku(id) {
      this.editBrandClassSkuVisible = true
      this.editClassSkuInfoForm.id = id
      const { code, message, data } = await cateAttrInfo({ id })
      this.options = data.sku_list.map((item) => {
        return { label: item.sku_key_name, value: item.id }
      })
      console.log(data)
      this.category_bind_attr = data.category_list.map((item) => {
        const sku_value_id = item.sku_value_list.filter((i) => i.is_select === 1).map((id) => id.id)
        console.log(item.sku_value_list)
        return {
          sku_key_id: item.id,
          sku_value_id,
          sku_group: item.sku_value_list,
          sku_key_name: item.sku_key_name,
        }
      })
    },

新增SKU按钮

 async addSkuInfo() {
      try {
        const { code, message, data } = await skuInfo({ id: this.changeValueId })
        const newObj = {
          sku_key_id: data.id,
          sku_key_name: data.sku_key,
          sku_value_id: [],
          sku_group: data.sku_value_list.map((item) => {
            return {
              id: item.id,
              is_select: 0,
              sku_value_name: item.prod_sku_value,
            }
          }),
        }

        this.category_bind_attr.push(newObj)
      } catch (err) {
        throw new Error(err)
      }
    },

提交修改

async getEditClassSku() {
      this.loading = true
      console.log(this.category_bind_attr)
      try {
        const { code, data, message } = await editCateAttr({
          category_bind_attr: JSON.stringify(this.category_bind_attr),
          id: this.editClassSkuInfoForm.id,
        })
        if (code !== 200) return this.$message.fail(message)
        this.editBrandClassSkuVisible = false
        this.$message.success('提交成功')
        this.loading = false
      } catch (err) {
        throw new Error(err)
      }
    },