vue+element 实现商品sku效果

在网上搜索了很久，没有发现合适sku编辑的文章，只能自己写一个vue+element 的sku编辑功能。实现的效果如下图

 

除成本、售价、库存、货号这几个写死的属性外，可自行添加/删除商品属性，自行添加删除商品sku。

PS：可自行修改这几个属性

话不多说，放码一战：

template/html

<div id="app">
      <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm" >
        <el-form-item label="商品规格：" required>
          <el-button  @click="addNature" :disabled="!editType" type="success">增加属性</el-button>
          <el-button @click="addSku" type="success">增加SKU</el-button>
          <el-button @click="logData" type="success">打印tableData数据</el-button>
          
        </el-form-item>
        <el-form-item>
          <el-table :data="tableData" style="width: 100%">
                <!-- 自定义部分 -->
                <el-table-column v-for="(col,i ) in attr_names" :prop="col.prop">
                  <template slot="header" slot-scope="scope">
                    <span class="del" v-on:click="delColumn(scope.$index)" v-if="editType">X</span>
                    <el-input v-model="col.label" size="mini" class="f-cent" :disabled="!editType"/>
                  </template>
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row[col.prop]" :disabled="!scope.row['editable']"> </el-input>
                  </template>
                </el-table-column>

                <!-- 固定写死的部分 -->
                <el-table-column prop="cost_price" label="成本">
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row['cost_price']" :disabled="!scope.row['editable']"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="售价">
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row['price']" :disabled="!scope.row['editable']"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="quantity" label="库存">
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row['quantity']" :disabled="!scope.row['editable']"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="no" label="货号">
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row['no']" :disabled="!scope.row['editable']"></el-input>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="deleteRow(scope.$index, tableData)"
                      type="text"
                      size="small" v-if="scope.row['editable']">
                      移除
                    </el-button>
                  </template>
                </el-table-column>

          </el-table>
        </el-form-item>
      </el-form>
    </div>

js部分

var app = new Vue({
            el: "#app",
            data: {
              editType:true, //判定商品属性标签是否可编辑
              attr_names: [ 
                  // 为了方便理解用 保留
                  // {label: '成本', prop: 'cost_price'},
                  // {label: '售价', prop: 'price'},
                  // {label: '库存', prop: 'quantity'}, 
                  // {label: '货号', prop: 'no'},
              ],
              tableData:[
                {
                  cost_price: '', //成本价
                  price: ' ',//售价
                  quantity: '',//库存
                  no: '',//货号
                  img:'',//图片
                  editable:true //判定SKU是否可编辑
                }
              ],
            },
            methods: {
                // 增加商品属性
                addNature(){
                  let len=this.attr_names.length;
                  //新增以 attr_ 开关，也可以自行定义
                  this.attr_names.push({label: '商品属性', prop: `attr_${len}`})
                },
                // 增加商品SKU
                addSku(){
                  let data=this.tableData[0]
                  let keys=[]
                  for (var key in data){
                      keys.push(key);
                  }
                  let obj={}
                  for(let i=0; i<keys.length; i++){
                    if(keys[i]==='editable'){
                      obj[keys[i]]=true
                    }else{
                      obj[keys[i]]=''
                    }
                  }
                  this.tableData.push(obj);
                },
                //删除一排   tableData ARR
                deleteRow(index, rows) {
                  rows.splice(index, 1);
                },
                //删除SKU列 每次删除最后一列数据
                delColumn(index){
                  let len=this.attr_names.length - 1 ;
                  let str=this.attr_names[len].prop;
                  this.tableData.map((item)=>{
                    delete item[str];
                  })
                  this.attr_names.pop()
                },
                // 调试代码信息用
                logData(){
                  console.log('this.attr_names',this.attr_names);
                  console.log('this.tableData',this.tableData);
                },
            }
        });

css

    .del{
        cursor: pointer;
        display: none;
        background: red;
        color: #fff;
        font-size: 10px;
        padding: 2px 5px;
        position: absolute;
        top: 7px;
        right: 0px;
        z-index: 9;
        border-radius: 3px;
      }
      .cell:hover .del{
        display: inline;
      }

 

 

代码很简单，都不难，主要讲解  editType/editable 这两个。在第一次发布商品sku时可忽略，但在编辑商品sku时就要注意了

editType：用于判断是否可添加删除商品的属于，例如商品发布过SKU，并已经有客户购买，那么该商品的属性值理应是无法更改的。

editable：用于判断商品该SKU是否可修改/删除，如iphone X  颜色：土豪金  内存:64G 已经有用户购买并生成购买订单(记录)。那么该条sku是不能更改/删除的。