vue后台商品管理 添加规格 属性sku

**

商品 后台 添加规格 属性

**
vue 加 element-ui

//这里使用的表格组件 
          <el-table :data="addForm.tableData" border style="width: 80%">
            <el-table-column fixed prop="name" label="规格" align="center">
            </el-table-column>
            <el-table-column prop="hxPrice" label="划线价(元)" align="center">
            </el-table-column>
            <el-table-column prop="price" label="售价(元)" align="center">
            </el-table-column>
            <el-table-column prop="num" label="起售数量" align="center">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row.id, scope.$index)"
                  type="text"
                  size="small"
                  >删除</el-button
                >

                <el-button
                  @click="editClick(scope.row.id)"
                  type="text"
                  size="small"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
     
//添加规格表单
	<el-dialog
          title="添加规格"
          :visible.sync="dialogVisibleguige"
          width="30%"
        >
          <el-form
            :model="addFormguige"
            :rules="addFormRulesguige"
            ref="addFormguige"
            label-width="100px"
            class="cardguige"
          >
            <el-form-item label=" 规格名称" prop="nameone">
              <el-input
                placeholder="请输入内容"
                class="inpwidth"
                v-model.trim="addFormguige.nameone"
                maxlength="35"
                clearable
              >
              </el-input>
            </el-form-item>
            <el-form-item label="划线价(元)" prop="hxPriceone">
              <el-input
                placeholder="请输入内容"
                class="inpwidth"
                v-model.trim="addFormguige.hxPriceone"
                type="number"
                maxlength="35"
                clearable
              >
              </el-input>
            </el-form-item>
            <el-form-item label="售价(元)" prop="priceone">
              <el-input
                placeholder="请输入内容"
                class="inpwidth"
                v-model.trim="addFormguige.priceone"
                type="number"
                maxlength="35"
                clearable
              >
              </el-input>
            </el-form-item>
            <el-form-item label="起售数量" prop="numone">
              <el-input
                placeholder="请输入内容"
                class="inpwidth"
                v-model.trim="addFormguige.numone"
                type="number"
                maxlength="35"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-form>
          <el-button @click="dialogVisibleguige = false">取 消</el-button>
          <el-button type="primary" @click="addguige('addFormguige')"
            >确 定</el-button
          >
        </el-dialog>

//添加规格按钮
<el-button
          type="primary"
          class="sub-btn"
          @click="openaddlist"
          size="mini"
          >添加规格</el-button
        ><span style="font-size: 12px; color: red">(最多添加五组规格)</span>

//功能js
<script>
export default {


  data() {
    return {
      dialogVisibleguige: false,
     Specifications:'',
	//表单
      addFormguige: {
        nameone: "",
        hxPriceone: "",
        priceone: "",
        numone: "",
      },
    //验证填写表单
      addFormRulesguige: {
        nameone: [
          { required: true, message: "请输入规格名称", trigger: "blur" },
        ],
        hxPriceone: [
          { required: true, message: "请输入划线价格", trigger: "blur" },
        ],
        priceone: [{ required: true, message: "请输入价格", trigger: "blur" }],
        numone: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
      },
     
    

    
    };
  },

 
  methods: {
   //限制添加规格数量
    openaddlist() {
      if (this.addForm.tableData.length >= 5) {
        return this.$message({
          message: "最多上传5跳规格",
          type: "warning",
        });
      }
      this.Specifications = 1
      this.dialogVisibleguige = true;
    },
    

	//确认按钮 this.Specifications判断添加还是修改
    addguige(addFormguige) {
      this.$refs[addFormguige].validate((valid) => {
        if (valid) {
        //修改
          if (this.Specifications == 0) {
            this.addForm.tableData.forEach((item) => {
              if (this.editClickid == item.id) {
                item.name = this.addFormguige.nameone;
                item.hxPrice = this.addFormguige.hxPriceone;
                item.price = this.addFormguige.priceone;
                item.num = this.addFormguige.numone;
              }
            });
          } 
          //确认添加
          if (this.Specifications == 1)  {
            this.addForm.tableData.push({
              idet: this.guigeshow,
              name: this.addFormguige.nameone,
              hxPrice: this.addFormguige.hxPriceone,
              price: this.addFormguige.priceone,
              num: this.addFormguige.numone,
            });
            this.guigeshow++;
          }

          this.addFormguige.nameone = "";
          this.addFormguige.hxPriceone = "";
          this.addFormguige.priceone = "";
          this.addFormguige.numone = "";
          this.editClickid = "";
          this.Specifications = '';

          this.dialogVisibleguige = false;
        }
      });
    },
    //删除规格
    handleClick(id, index) {
      this.addForm.tableData.forEach((item) => {
        if (id == item.id) {
          this.addForm.tableData.splice(index, 1);
        }
      });
    },
    //修改规格
    editClick(id) {
      this.editClickid = id;
      this.Specifications = 0;
      this.addForm.tableData.forEach((item) => {
        if (id == item.id) {
          this.addFormguige.nameone = item.name;
          this.addFormguige.hxPriceone = item.hxPrice;
          this.addFormguige.priceone = item.price;
          this.addFormguige.numone = item.num;
        }
      });

      this.dialogVisibleguige = true;
    },

   
  },
};
</script>