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