update

src/components/common/sku.vue

@@ -5,7 +5,7 @@
       :index="index"
       :skuList="skuList"
       :skuNameList="skuNameList"
-      :skuGroup="item"
+      :skuItem="item"
       @remove="groupRemove(index)"
       :key="index"
     ></sku-group>
@@ -37,32 +37,33 @@ export default {
   },
   data() {
     return {
-      skuNameList: [
+      skuList: [
         {
-          spec_id: '6800681629820911616',
-          shop_id: '6800681447305773056',
-          spec_name: '紫荆教育测试2',
-          status: 1,
-          create_time: '2021-05-19 03:20:51',
-          update_time: '2021-05-19 03:20:51'
+          id: '1',
+          name: '颜色',
+          values: [
+            { id: '1', value: '红' },
+            { id: '2', value: '黄' }
+          ]
         },
         {
-          spec_id: '6800681665740931072',
-          shop_id: '6800681447305773056',
-          spec_name: '紫荆教育测试3',
-          status: 1,
-          create_time: '2021-05-19 03:20:59',
-          update_time: '2021-05-19 03:20:59'
+          id: '2',
+          name: '大小',
+          values: [
+            { id: '1', value: 'L' },
+            { id: '2', value: 'M' }
+          ]
         }
+      ],
+      skuNameList: [
+        { spec_id: '1', spec_name: '颜色' },
+        { spec_id: '2', spec_name: '大小' }
       ] // 规格名称列表
     }
   },
   computed: {
     shopId() {
       return this.$store.state.shopId
-    },
-    skuList() {
-      return this.value
     }
   },
   methods: {

src/components/common/skuGroup.vue

@@ -3,8 +3,13 @@
     <div class="sku">
       <div class="sku-label">规格名：</div>
       <div class="sku-content">
-        <el-select v-model="skuGroup.spec_id">
-          <el-option v-for="item in skuNameList" :key="item.id"></el-option>
+        <el-select v-model="skuItem.id" placeholder="请选择">
+          <el-option
+            v-for="item in skuNameList"
+            :label="item.spec_name"
+            :value="item.spec_id"
+            :key="item.spec_id"
+          ></el-option>
         </el-select>
         <!-- <el-tag closable @close="removeGroup">
           <el-input
@@ -18,13 +23,13 @@
         </el-tag> -->
       </div>
     </div>
-    <div class="sku">
+    <div class="sku" v-if="false">
       <div class="sku-label">规格值：</div>
       <div class="sku-content">
         <el-tag
           closable
           :disable-transitions="true"
-          v-for="(sku, index) in group.value"
+          v-for="(sku, index) in skuItem.values"
           :key="`sku_${index}`"
           @close="removeSKU(index)"
         >
@@ -58,10 +63,10 @@
 import { getSkuValueList } from '@/api/goods'
 export default {
   props: {
-    index: { type: Number, default: 0 },
-    skuNameList: { type: Array, default: () => [] }, // 规格名称列表
-    groupList: { type: Array, default: () => [] },
-    skuGroup: { type: Object, default: () => ({}) }
+    index: { type: Number, default: 0 }, // 索引
+    skuList: { type: Array, default: () => [] }, // 规格列表
+    skuItem: { type: Object, default: () => ({}) }, // 当前规格
+    skuNameList: { type: Array, default: () => [] } // 规格名称列表
   },
   data() {
     return {