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是不能更改/刪除的。