Vue 商城后台生成商品SKU规格列表

前两个月刚入职一家新公司，由于公司是电商性质的，需要二开商城功能，重新做SKU列表，
由于时间紧张采用了vue-sku-form 这个组件；需要的可以参考；

最近终于有时间了 自己将SKU 撸了一遍

技术栈是 vue+element

先上预览图

1. 先写HTML部分

<div class="sku_select">
    <!-- 添加规格-->
    <el-row>
        <el-col :span='2'>添加规格:</el-col>
        <el-col :span='8'>
            <el-input v-model='Specs' placeholder="请输入内容" size='small' @keyup.enter.native='addSpecs'>
                <el-button slot="append" @click='addSpecs'>添加规格</el-button>
            </el-input>
        </el-col>
    </el-row>
    <!-- 添加参数-->
    <el-row class="specs_box">
        <div class="specs_item" v-for='(item,i) of SpecsList' :key='i'>
            <div class="specs_titt">{{item.key}}</div>
            <div class="specs_key">
                <el-checkbox-group v-model="item.checkedAttr" @change='checkboxChange(item)'>
                    <el-checkbox v-for="(value,j) in item.value" :label="value" :key="j">{{value}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div class="specs_add">
                <el-input placeholder="请输入内容" v-model='attribute' size='small' @keyup.enter.native='addAttribute(item,i)'>
                    <el-button slot="append" @click='addAttribute(item,i)'>添加参数</el-button>
                </el-input>
            </div>
        </div>
    </el-row>
</div>
<!-- SKU 表格-->
<div class="table_box">
    <el-table ref='SkuData' :data="SkuData" style="width: 100%" border>
        <!-- <el-table-column align="center" v-for="(item, i) of checkedAttr" :key="i">
            <template slot="header" slot-scope="scope">
                {{item.key}}
            </template>
            <template slot-scope="scope">
                {{ scope.row.price }}
            </template>
        </el-table-column> -->
        <template v-for="(item, index) in checkedAttr">
            <el-table-column
                :label="item.key"
                :key="index"
                align='center'>
                <template slot-scope="scope">
                    {{ scope.row[item.key]}}
                </template>
        </el-table-column>
        </template>
        <el-table-column label="价格" align='center'>
            <template slot-scope='scope'>
                <el-input v-model='scope.row.price'></el-input>
            </template>
        </el-table-column>
        <el-table-column label="库存" align='center'>
            <template slot-scope='scope'>
                <el-input v-model='scope.row.stock'></el-input>
            </template>
        </el-table-column>
    </el-table>
  </div>
  <!-- SKU 数据-->
  <div>{{table}}</div>

2. CSS 样式

.sku_select {
    font-size: 14px;
}

.specs_box {
    margin: 10px 0;
}

.specs_item {
    width: 300px;
    height: auto;
    border-radius: 5px;
    border: 1px solid #DCDFE6;
    overflow: hidden;
    display: inline-block;
    margin: 10px;
}

.specs_titt {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding: 0 10px;
    border-bottom: 1px solid #DCDFE6;
}

.specs_key {
    padding: 10px;
}

.specs_add {
    padding: 10px;
}

3. JS 部分

data详情

data() {
       return {
           SkuData: [], //skudata
           Specs: "", //添加的规格值
           attribute: "", //添加的参数值
           checkedAttr: [], //勾选详情
           SpecsList: [
               { key: '颜色', value: ["黑", "白"], checkedAttr: [] },
               { key: '尺寸', value: ["14寸", "15寸"], checkedAttr: [] },
               { key: '储存盘', value: ["固态", "机械"], checkedAttr: [] },
           ], //规格详情
       }
   },

添加规格

首先判断输入值是否为空，为空则让其抛出，如果值存在，再判断规格列表是否存在规格做规格名称重复验证；

addSpecs() {
    var that = this;
    var val = that.Specs;
    var list = that.SpecsList;
    if (val) { //判断输入值是否为空
        if (list.length > 0) { // 判断是否存在规格
            for (var i = 0; i < list.length; i++) {
                if (list[i].key == val) {
                    alert('名称重复') // 验证规格名称是否重复
                    that.Specs = '';
                    return
                }
            }
            list.push({ //没有重复 则push到数组中
                "key": val,
                "value": [],
                "checkedAttr": []
            })
            that.Specs = '';
        } else { // 如果不存在 则push到数组里
            list.push({
                "key": val,
                "value": [],
                "checkedAttr": []
            })
            that.Specs = '';
        }
    } else {
        alert('不能为空')
    }
},

添加参数

首先判断输入值是否为空，为空则让其抛出，如果值存在，再判断参数列表是否存在参数做参数名称重复验证；

addAttribute(value, i) {
      console.log(this.attribute)
      var list = this.SpecsList[i].value;
      if (this.attribute) { //参数是否为空
          if (list.indexOf(this.attribute) != -1) { //查找参数是否存在
              return alert("已存在")
          } else {
              this.SpecsList[i].value.push(this.attribute);
          }
      } else {
          alert("不能为空")
      }
      console.log(this.SpecsList)
      this.attribute = ''
  },

勾选参数

setTableData(attrArr) {
    var that = this;
    let list = attrArr;
    const reducer = (accumulator, currentValue) => {
        var data = [];
        console.log(accumulator, currentValue, '//////')
        if (accumulator.length) { //判断accumulator是否为第一次传入
            accumulator.forEach(element => {
                currentValue.value.forEach(value => {
                    let obj = {};
                    for (var el in element) {
                        // console.log(el + "...." + element[el]);
                        let key = currentValue.key;
                        obj[key] = value;
                        obj[el] = element[el];
                        obj['price'] = '';
                        obj['stock'] = '';
                    }
                    data.push(obj)

                })
            })
        } else {
            accumulator.value.forEach(el => {
                currentValue.value.forEach(value => {
                    let obj = {};
                    let key = accumulator.key;
                    obj[key] = el;
                    let key1 = currentValue.key;
                    obj[key1] = value;
                    obj['price'] = '';
                    obj['stock'] = '';
                    data.push(obj)
                })
            })
        }

        return that.SkuData = data
    };
    if (list.length == 1) { //判断是否选择了一个规格
        console.log(list); 
        var data = [];
        for (var i = 0; i < list[0].value.length; i++) {
            var obj = {};
            var key = list[0].key;
            obj[key] = list[0].value[i];
            obj['price'] = '';
            obj['stock'] = '';
            data.push(obj)
        }
        that.SkuData = data
    } else {
        that.SkuData = list.reduce(reducer);
    }
},

在computed中监听SKUData

computed: {
    table() {
        var data = this.SkuData;
        return data
    }
},

到此 简单的Sku 商品规格组合就算是完成了 ；

后续会更新其他功能