标签：sku category form value item 以项 table data id

一个提示框里面的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)
      }
    },

标签：sku,category,form,value,item,以项,table,data,id
来源： https://blog.csdn.net/weixin_48200589/article/details/111630673

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。