├── README.md
├── Screenshots
    └── spec.png
└── spec.vue


/README.md:
--------------------------------------------------------------------------------
1 | # vue-spec
2 | 基于vue2.0商品规格组件
3 | 
4 | ![image](https://github.com/goodpan/vue-spec/raw/master/Screenshots/spec.png)
5 | 


--------------------------------------------------------------------------------
/Screenshots/spec.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goodpan/vue-spec/28a6b8eeceb2457daed6bfd570b1f79685fd2156/Screenshots/spec.png


--------------------------------------------------------------------------------
/spec.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="">
  3 |     <div class="form-group">
  4 |       <div class="form-h">商品规格</div>
  5 |       <div class="form-item"  v-for="(attr,index) in attrs" :key="`attr${index}`">
  6 |         <div class="form-title">
  7 |           <input type="text" name="" value="" v-model="attr.pName" placeholder="规格名">
  8 |           <span class="delete" @click="toDelete(index)">×</span>
  9 |         </div>
 10 |         <ul class="form-list">
 11 |           <li v-for="(item,index2) in attr.spec" :key="`item${index2}`">
 12 |             <input class="spec-item" type="text" name="" value="" v-model="item.cName">
 13 |           </li>
 14 |         </ul>
 15 |         
 16 |       </div>
 17 |       <div class="form-btn-group"><button class="btn" type="button" name="" @click="addItem">添加规格项目</button></div>
 18 |       <div class="form-table" v-show="tableData">
 19 |         <div class="stock-title">商品库存</div>
 20 |         <table class="table-sku" border="1px solid #ccc">
 21 |           <thead>
 22 |             <tr>
 23 |               <td v-for="(list,index) in tableData" :key="`list${index}`">{{list['pName']}}</td>
 24 |               <td>价格</td>
 25 |               <td>数量</td>
 26 |             </tr>
 27 |           </thead>
 28 |           <tbody>
 29 |               <tr v-for="(row,index) in rows" :key="`row${index}`">
 30 |                   <td v-for="(item,index2) in tableData" v-if="!((row-1)%item['rowspan'])" :rowspan="item['rowspan']" :key="`item${index2}`">
 31 |                       {{item|getName(row)}}
 32 |                   </td>
 33 |                   <td><input type="text" v-model="tableList[row-1]['price']"></td>
 34 |                   <td><input type="text" v-model="tableList[row-1]['number']"></td>
 35 |               </tr>
 36 |           </tbody>
 37 |         </table>
 38 |         <div class="form-btn-group"><button class="btn" type="button" name="" @click="toConfirm">确认</button></div>
 39 |     </div>
 40 |     </div>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | export default {
 46 |   data () {
 47 |     return {
 48 |       attrs:[]
 49 |     }
 50 |   },
 51 |   mounted () {
 52 |      //console.log(this.attrs);
 53 |      //console.log(this.tableData);
 54 |      //console.log(this.rows);
 55 |      //console.log(this.tableList);
 56 |   },
 57 |   filters:{
 58 |     getName:function(obj,index){
 59 |         if(obj){
 60 |           var r = parseInt((index-1)/obj['rowspan']);
 61 |           var l = obj['specLen']||1;
 62 |           var key = r%l;
 63 |           return obj['spec']&&obj['spec'][key]&&obj['spec'][key]['cName'];
 64 |         }
 65 |     }
 66 |   },
 67 |   computed:{
 68 |     tableData:function(){
 69 |       var attrs = this.attrs;
 70 |       var len = attrs.length;
 71 |       if(len==0){
 72 |         return;
 73 |       }
 74 |       var tData = [];
 75 |       //初始化tableData
 76 |       for (var i = 0; i < len; i++) {
 77 |         var row = {};
 78 |         row['pName'] = attrs[i]['pName'];
 79 |         row['spec'] = [];
 80 |         row['price'] = {};
 81 |         row['number'] = {};
 82 |         var len2 = attrs[i]['spec'].length;
 83 |         var specLen = 0;
 84 |         for (var j = 0; j < len2; j++) {
 85 |             var spe = {};
 86 |             var cName = attrs[i]['spec'][j]['cName'];
 87 |             if(!cName){
 88 |               continue;
 89 |             }
 90 |             ++specLen;
 91 |             spe['cName'] = cName;
 92 |             row['spec'].push(spe);
 93 |         }
 94 |         row['specLen'] = specLen;
 95 |         tData.push(row);
 96 |       }
 97 |       //获取rowspan
 98 |       for (var k = 0,len3=tData.length; k < len3; k++) {
 99 |           var rowspan = 1;
100 |           for (var k1 = k+1; k1 < len3; k1++) {
101 |               var kSpecLen = tData[k1]['specLen']||1;
102 |               rowspan*=kSpecLen;
103 |           }
104 |           tData[k]['rowspan'] = rowspan;
105 |       }
106 |       return tData;
107 |     },
108 |     rows:function(){
109 |       if(!this.tableData){
110 |         return;
111 |       }
112 |       var rows = 1;
113 |       var tableData = this.tableData;
114 |       var len = tableData.length;
115 |       for (var i = 0; i < len; i++) {
116 |          var specLen = tableData[i]['specLen']||1;
117 |          rows*=specLen;
118 |       }
119 |       //每条rowspan都为1情况
120 |       if(rows==1){
121 |         return tableData[0]['spec'].length;
122 |       }
123 |       return rows;
124 |     },
125 |     tableList:function(){
126 |         if(!this.tableData){
127 |           return;
128 |         }
129 |        var rows = this.rows;
130 |        var tList = [];
131 |        var srcData = this.tableData;
132 |        //console.log(srcData);
133 |        for (var i = 0; i < rows; i++) {
134 |           var listItem = {};
135 |           //构建动态项
136 |           for (var j = 0; j < srcData.length; j++) {
137 |               //构造第一类目
138 |               var key = srcData[j]['pName'];
139 |               var rowspan = srcData[j]['rowspan'];
140 |               var len = srcData[j]['specLen'];
141 |               if(!len){
142 |                 continue;
143 |               }
144 |               var spec = srcData[j]['spec'];
145 |               var index = parseInt(i/rowspan)%len;
146 |               listItem[key] = spec[index]['cName'];
147 |           }
148 |           //构建固定项(price,number)
149 |           listItem['price'] = "";
150 |           listItem['number'] = "";
151 |           tList.push(listItem);
152 |        }
153 |        return tList;
154 |     }
155 |   },
156 |   components: {
157 |   },
158 |   methods: {
159 |     addItem:function(){
160 |       var obj = {
161 |           pName: '',
162 |           rowspan:1,
163 |           spec: [
164 |             {cName:''},
165 |             {cName:''},
166 |             {cName:''},
167 |             {cName:''},
168 |             {cName:''},
169 |             {cName:''},
170 |             {cName:''},
171 |             {cName:''}
172 |           ]
173 |       };
174 |       if(this.attrs.length>=3){
175 |         return;
176 |       }
177 |       this.attrs.push(obj);
178 | 
179 |     },
180 |     toDelete:function(index){
181 |         this.attrs.splice(index,1);
182 |     },
183 |     toConfirm:function(){
184 |         // console.log(this.tableList);
185 |         alert(JSON.stringify(this.tableList))
186 |     }
187 |   }
188 | }
189 | </script>
190 | 
191 | <style lang="css">
192 | /**reset*/
193 | button,input{ 
194 |    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);    
195 |    outline: none;
196 | }
197 | .btn{
198 |   padding: 4px 12px;
199 |   margin-bottom: 0;
200 |   font-size: 14px;
201 |   color: #333;
202 |   vertical-align: middle;
203 |   cursor: pointer;
204 |   background-color: #f8f8f8;
205 |   border: 1px solid #ddd;
206 |   -webkit-border-radius: 2px;
207 |   -moz-border-radius: 2px;
208 |   border-radius: 2px;
209 | }
210 | .btn.active, .btn:active, .btn:focus, .btn:hover {
211 |     text-decoration: none;
212 |     color: #333;
213 |     background-color: #fcfcfc;
214 |     border-color: #ccc;
215 | }
216 | /*table*/
217 | table{
218 |   border:0;
219 | }
220 | table.table-sku {
221 |     width: 100%;
222 |     background-color: #fff;
223 |     text-align: left;
224 | }
225 | table {
226 |     border-collapse: collapse;
227 |     border-spacing: 0;
228 | }
229 | table.table-sku td {
230 |     border: 1px solid #e5e5e5;
231 |     padding: 8px;
232 | }
233 | table.table-sku td input{
234 |     padding: 10px;
235 |     border: 1px solid #ccc;
236 | }
237 | /**/
238 | .form-title{
239 |     background: #f8f8f8;
240 |     padding: 10px;
241 |     position: relative;
242 | }
243 | .form-title .label{
244 |     color:#999;
245 | }
246 | .form-title .delete{
247 |     width: 20px;
248 |     height: 20px;
249 |     line-height: 20px;
250 |     border: 1px solid #ccc;
251 |     border-radius: 50%;
252 |     position: absolute;
253 |     right: 15px;
254 |     top: 50%;
255 |     margin-top: -10px;
256 |     text-align: center;
257 |     color: #fff;
258 |     background: #ccc;
259 |     cursor: pointer;
260 | }
261 | .form-title input{
262 |     background: #fff;
263 |     border: 1px solid #ccc;
264 |     padding: 10px;
265 | }
266 | .form-list{
267 |     padding:10px;
268 |     margin-top:0;
269 | }
270 | .form-list li{
271 |     display: inline-block;
272 |     margin-top:10px;
273 | }
274 | .spec-item{
275 |     width: 100px;
276 |     overflow: hidden;
277 |     text-overflow: ellipsis;
278 |     white-space: nowrap;
279 | }
280 | .form-list,.form-title{
281 |     text-align:left;
282 | }
283 | .form-list  input{
284 |     background: #fff;
285 |     margin-right: 10px;
286 |     border: 1px solid #ccc;
287 |     padding: 10px;
288 |   }
289 | .form-group{
290 |   border: 1px solid #ccc;
291 |   padding: 10px;
292 | }
293 | .form-table{
294 |   margin-top: 50px;
295 | }
296 | .form-btn-group{
297 |   margin-top:20px;
298 |   background: #f8f8f8;
299 |   padding: 10px;
300 | }
301 | .stock-title,.form-h{
302 |   height: 40px;
303 |   line-height: 40px;
304 | }
305 | </style>
306 | 


--------------------------------------------------------------------------------