VUE-商品详情多规格-拿来即用--插件式

效果图

 具体代码

<template>
  <div class="title-small colonn">

    <div class="colonn"
     style="padding:20px 20px;border-radius: 10px;margin-top:10px;">
      <div class="roww">
        <div style="color: #606266;margin-right: 10px;min-width:60px;">添加规格</div>
        <el-tag
          :key="'tag'+index"
          v-for="(tag,index) in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)">
          {{tag.name}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">添加规格</el-button>
      </div>

    </div>
    <div class="roww  endend">
      <el-button type="danger" @click="getSkus">生成所有规格</el-button>
    </div>
    <div class="colonn"
     v-for="(item,index) in dynamicTags"
     style="background-color: #fcfcfc;padding:20px 20px;border-radius: 10px;margin-top:10px;">
      <div class="roww">
        <div style="color: #606266;margin-right: 10px;min-width:60px;">规格名</div>
        <div style="font-weight: bold;">{{item.name}}</div>
      </div>
      <div class="roww" style="margin-top:20px;">
        <div style="color: #606266;margin-right: 10px;min-width:60px;">规格值</div>
        <div>
          <!--  -->
           <el-checkbox v-model="item.is"  @change="allTrueValue(index)">全选</el-checkbox>
           <!-- -->
        </div>
      </div>
      <div class="roww" style="margin-top:20px;">
        <div style="color: #606266;margin-right: 10px;opacity: 0;min-width:60px;">规格值</div>
        <div class="huanhang">
           <el-checkbox style="margin-bottom:15px;"
            v-model="item1.is"
            v-for="(item1,index1) in item.listvalue">{{item1.value}}</el-checkbox>
            <div style="width:25px;" v-if="item.listvalue.length>0"></div>
           <el-input
           style="margin-bottom:15px;"
             class="input-new-tag"
             v-if="index==indexSpace"
             v-model="inputValue1"
             :focus="index==indexSpace"
             size="small"
             @keyup.enter.native="handleInputConfirm1(index,$event)"
             @blur="handleInputConfirm1(index,$event)"
           >
           </el-input>
           <el-button v-else class="button-new-tag" size="small" @click="showInput1(index)">添加规格</el-button>

        </div>
      </div>
    </div>

    <div class="roww center_center">
      <el-button @click="getAllValues">获取所有值</el-button>
    </div>

    <div style="height:15px;"></div>
    <el-table
     :data="tabledatas"
          style="width: 100%">
          <el-table-column v-for="(item,index) in dynamicTags"
            :label="item.name"
             :prop="'key'+index"
            >
          </el-table-column>

          <el-table-column
            label="库存">
            <template  slot-scope="scope">
              <el-input type="number"  v-model="scope.row.stock" placeholder="请输入库存"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="原价格">

            <template  slot-scope="scope">
              <el-input  type="number" v-model="scope.row.original_price"  placeholder="请输入原价格"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="价格" >
            <template  slot-scope="scope">
              <el-input type="number" v-model="scope.row.price"  placeholder="请输入价格"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-table :show-header="false" v-if="tabledatas.length>0"
         :data="tableData"
         :cell-style="cellStyle"
              style="width: 100%;background-color: #0072C6;">
              <el-table-column v-for="(item,index) in dynamicTags"
                :label="item.name"
                 :prop="'key'+index"
                >
                <template>
                  {{index==0?'整体调整':""}}
                </template>
              </el-table-column>

              <el-table-column
                label="库存">
                <template  slot-scope="scope">
                  <el-input type="number"  v-model="stockss" placeholder="请输入库存"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="原价格">

                <template  slot-scope="scope">
                  <el-input  type="number" v-model="original_pricess"  placeholder="请输入原价格"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="价格" >
                <template  slot-scope="scope">
                  <el-input type="number" v-model="pricess"  placeholder="请输入价格"></el-input>
                </template>
              </el-table-column>
            </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
        dynamicTags: [],//规格名列表
        inputVisible: false,
        inputValue: '',
        inputValue1:'',//规格属性值
        indexSpace:0,//第几个规格
        tabledatas:[],
        tableData:[{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
        }],
        spacesList:[],//所有的规格可能
        stockss:0,//库存修改所有
        pricess:0,//价格修改所有
        original_pricess:0,//价格修改所有
    };
  },
  props: {
    content: "",//接收参数
  },
  components: {},
  created() {},
  mounted() {},
  watch:{
    stockss(res){
      console.log(res)
      var tabledatas=this.tabledatas;
      for(var a=0;a,tabledatas.length;a++){
        tabledatas[a].stock=res;
      }
      this.tabledatas=tabledatas;
    },
    pricess(res){
      console.log(res)
      var tabledatas=this.tabledatas;
      for(var a=0;a,tabledatas.length;a++){
        tabledatas[a].price=res;
      }
      this.tabledatas=tabledatas;
    },
    original_pricess(res){
      console.log(res)
      var tabledatas=this.tabledatas;
      for(var a=0;a,tabledatas.length;a++){
        tabledatas[a].original_price=res;
      }
      this.tabledatas=tabledatas;
    },
  },
  methods: {

    cellStyle(){
      return "background:#e8f4ff;"
    },

    getAllValues(){
      console.log("tabledatas",this.tabledatas)
    },
    // 算法获取所有排序可能
    getSkus(){
      var dynamicTags=this.dynamicTags;
      if(dynamicTags.length<=0){
         this.$message({
                  message: '请填写相关规格',
                  type: 'warning'
                });
        return false;
      }
      console.log('dynamicTags',dynamicTags)
      var spaces=[];
      for(var a=0;a<dynamicTags.length;a++){
        var list=[];
        for(var b=0;b<dynamicTags[a].listvalue.length;b++){
          if(dynamicTags[a].listvalue[b].is){
            list.push(dynamicTags[a].listvalue[b].value);
          }
        }
        spaces.push(list);
      }
      console.log(spaces)
      let allArr =this.cartesianProductOf(...spaces)
      this.spacesList=allArr;
      this.tableData1();
    },
    //整理sku数据  和表格需要的数据一样
    tableData1(){
      var spacesList=this.spacesList;
      var dynamicTags=this.dynamicTags;
      var tabledatas=[];
      for(var a=0;a<spacesList.length;a++){
        var obg={};
        for(var b=0;b<spacesList[a].length;b++){
          obg['key'+b]=spacesList[a][b];
        }
        obg.stock=0;
        obg.price=0;
        obg.original_price=0;
       tabledatas.push(obg);
      }



      this.tabledatas=tabledatas;
      console.log(tabledatas)
    },
    cartesianProductOf() {
        return Array.prototype.reduce.call(arguments, function(a, b) {
            var ret = [];
            a.forEach(function(a) {
                b.forEach(function(b) {
                    ret.push(a.concat([b]));
                });
            });
            return ret;
        }, [[]]);
    },
    // 动态添加规格 showInput
    showInput1(index){
      console.log("动态添加规格",index)
      this.indexSpace=index;

    },
    // 输入属性值
  handleInputConfirm1(index,res) {
    if(this.inputValue1==""){
      this.$message({
                message: '请输入属性值',
                type: 'warning'
              });
      return false;
    }
       var spaceindex=this.indexSpace;
       var dynamicTags=this.dynamicTags;
       var obg={
         'is':true,
         'value':this.inputValue1
       }
       dynamicTags[spaceindex].listvalue.push(obg);
       this.dynamicTags=dynamicTags;
       this.inputValue1="";
        this.$forceUpdate();
  },
  // 点击全选
  allTrueValue(index){
    var dynamicTags=this.dynamicTags;
    var listvalue=dynamicTags[index].listvalue;
    for(var a=0;a<listvalue.length;a++){
      console.log(dynamicTags[index].is)
      listvalue[a].is=dynamicTags[index].is;
    }
    dynamicTags[index].listvalue=listvalue;
    this.dynamicTags=dynamicTags;
    this.$forceUpdate();
  },

    inputChange(res){
      console.log(res)
      this.goodprice=res;
      this.$forceUpdate()
    },

    // 添加规格值开始
     handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
          },

          showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
              this.$refs.saveTagInput.$refs.input.focus();
            });
          },

          handleInputConfirm() {
            let inputValue = this.inputValue;
            var obg={
              'name':inputValue,
              is:true,
              listvalue:[],
            }
            if (inputValue) {
              this.dynamicTags.push(obg);
            }
            this.inputVisible = false;
            this.inputValue = '';
             this.$forceUpdate();
          },
          // 添加规格值结束

  },
};
</script>
<style >
@import url("style.css");

/* 添加规格 */
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>