优化规格管理样式

mall4v/src/views/modules/prod/spec-add-or-update.vue

@@ -27,6 +27,7 @@
                   :key="item.valueId">
             <el-input placeholder="请输入内容"
                       v-model="item.propValue"
+                      class="prop-value-input"
                       @clear="clearProdPropValues"
                       maxlength="20"
                       show-word-limit
@@ -34,6 +35,7 @@
           </el-col>
           <el-col :span="4">
             <el-button type="primary"
+            class="add-input"
                        icon="el-icon-circle-plus"
                        @click="addInput()"></el-button>
           </el-col>
@@ -154,3 +156,13 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.prop-value-input {
+  padding: 3px;
+}
+
+.add-input {
+  margin: 3px;
+}
+</style>

mall4v/src/views/modules/prod/spec.vue

@@ -22,8 +22,11 @@
 
       <template slot-scope="scope"
                 slot="prodPropValues">
-        <el-tag v-for="item in scope.row.prodPropValues"
-                :key="item.valueId">{{item.propValue}}</el-tag>
+        <div v-for="item in scope.row.prodPropValues"
+                  :key="item.valueId" class="prop-value">
+          <el-tag>{{item.propValue}}</el-tag>          
+        </div>
+
       </template>
 
       <template slot-scope="scope"
@@ -145,3 +148,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.prop-value {
+  display: inline-block;
+  margin: 0 3px 3px 0;
+}
+</style>