vue+element实现商品多规格的添加(sku)

最新推荐文章于 2026-04-11 01:26:41 发布

原创

最新推荐文章于 2026-04-11 01:26:41 发布 · 1w 阅读

本文介绍了使用Vue和ElementUI实现商品多规格添加的功能，包括样式设计和数据处理。作者分享了在实际开发中如何处理商品规格数据格式、对接后端接口的参数格式以及样式实现，特别是通过笛卡尔积算法生成表格。文中还提到，虽然初入前端，但在不断尝试和学习中，完成了这个挑战性的任务。

商品多规格的添加

在这里声明一下，当时参考了当时一位大佬的博客，样式和笛卡尔积算法生成的表格是模仿的人家的。
当时我也是初入前端这个行业，去得第一家公司写的这个功能，但是公司里我待的那个部门只有我一个前端，所以只要是前端的东西只能我来改，没法办法，就算是不符合初级前端能写出来的东西也得硬着头皮去写。也很感谢那段时光，让人快速的成长，学到不少东西。

拿到这个需求，我当时考虑到的因素。
1. 商品规格走的数据格式
2. 对接后端接口的时候传的参数格式
3. 样式怎么实现方便我去操作数据
好吧，当时想了这么多都是问了一个大哥给到的意见，算了算，写了三四次才把前端生成的数据格式给定下来。当时也是参考了一位大佬的博客模仿写出来的。主要参考的大佬的样式的和用户填写规格名和值之后利用笛卡尔积生成的表格，剩下的数据整合和传参整合自己写的。

一、样式

样式整体分两个部分
1.用户填写自定义的商品规格名和规格值
2.下面对应动态加载的排列组合规格值后的表格

在这里插入图片描述
因为项目里面数据比较乱，所以这里我沿用之前参考的博客的模式，单独在html里面写了例子出来，不然数据一块一块的看起来比较乱。

<!DOCTYPE html>
<html lang="zh-CN" ng-strict-di>
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="X-Context-Path" content="" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <head>
    <title>
      商品规格sku
    </title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  </head>
  <body>
    <style>
      .goods-spec {
    
    
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .goods-spec .goods-spec-add {
    
    
        margin-right: 15px;
      }

      .goods-container .button-new-tag {
    
    
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
      }
      .goods-container .input-new-tag {
    
    
        width: 90px;
        margin-right: 10px;
        vertical-align: bottom;
      }
      .goods-container .el-tag {
    
    
        margin-right: 10px;
      }
      .goods-container .goods-content {
    
    
        margin-bottom: 10px;
        padding: 14px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        background-color: #fcfcfc;
      }
      .goods-content .goods-content-box {
    
    
        display: flex;
        align-items: center;
      }
      .goods-content-box .goods-content-left {
    
    
        flex: 1;
      }
    </style>

    <div id="app">
      <div style="padding:60px;">
        <div class="goods-spec">
          <span>商品规格</span>
          <el-link type="primary" @click="addPrivateSpec" class="goods-spec-add">添加规格</el-link>
        </div>

        <div class="goods-container" v-for="(attr, index) in privateGoodsItem" :key="index">
          <div class="goods-content">
            <div class="goods-content-box">
              <div class="goods-content-left">
                <el-form