商品规格

src/views/product/info/index.vue

@@ -305,7 +305,7 @@
         </div>
         <div v-show="stepNumber === 2">
           <el-form-item label="规格" prop="ruleId">
-            <el-select v-model="form.ruleId" placeholder="请选择" style="width: 100%;">
+            <el-select v-model="form.ruleId" placeholder="请选择" @change="changeRule" style="width: 100%;">
               <el-option
                 v-for="rule in ruleList"
                 :key="rule.id"
@@ -315,6 +315,12 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-table
+            :data="skuList"
+            border
+            style="width: 100%">
+            <el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label"> </el-table-column>
+          </el-table>
         </div>
         <div v-show="stepNumber === 3">
           <el-form-item label="商品描述">
@@ -404,7 +410,26 @@ export default {
         templateAttributeGroupList: [],
         templateAttributeList: [],
         attributeList: []
-      }
+      },
+      titleList: [
+        {
+          "label":"商品库存",
+          "prop":"stock"
+        }, {
+          "label":"商品价格",
+          "prop":"price"
+        }, {
+          "label":"规格图片",
+          "prop":"image"
+        }
+      ],
+      skuList: [
+        {
+          "image": "123",
+          "price": 85.62,
+          "stock": 236
+        }
+      ]
     };
   },
   watch: {
@@ -441,6 +466,10 @@ export default {
     this.getList();
   },
   methods: {
+    changeRule(ruleId){
+      let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
+      console.log(ruleInfo);
+    },
     saveCustomAttribute(){
       addAttribute({"code": this.customAttributeForm.code, "name": this.customAttributeForm.name}).then(response => {
         if (response.code === 200){