动态sku多规格表格vue版

最新推荐文章于 2024-09-07 11:52:22 发布
最新推荐文章于 2024-09-07 11:52:22 发布
阅读量689 收藏 2
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39459339/article/details/132573119
版权

动态sku多规格表格
在项目中很常见的就是我们的动态输入添加模式
我这边给各位演示另外一个select跟输入版本一致
还有很多优化点各位可以提建议

<template>
  <div>
    <div class="border-box">
      <el-tabs type="border-card">
        <el-tab-pane label="商品规格">
          <div v-if="itemList == null || itemList.length <= 0" class="el-table__empty-block">
            <span class="el-table__empty-text">暂无数据</span>
          </div>
          <div class="border-guige">
            <div v-for="(item, index) in itemList" :key="index">
              <div class="flex-guige">
                <div class="ym_thead" style="display: flex; justify-content: space-between; border-bottom: 1px solid #f7f7f7">
                  <div>{{ item.specName }}</div>
                  <div class="remove">
                    <el-link type="primary" :underline="false">移除</el-link>
                  </div>
                </div>
              </div>
              <div class="flex-guige" style="padding-bottom: 10px; margin: 20px 0; border-bottom: 1px solid #e5e5e5">
                <div class="width-tag" style="margin-bottom: 10px">
                  <el-tag v-for="(tag, ins) in item.specValueName" :key="ins" closable :disable-transitions="false" type="info" @close="handleClose(index, ins)">
                    {{ tag.specValueName }}
                  </el-tag>
                </div>
                <el-popover placement="top" width="160">
                  <el-select v-model="inputValue" placeholder="添加规格值" @blur="focusConfirm(index)" @change="handleInputConfirm(index)">
                    <el-option v-for="spec in optionsvalue" :key="spec.id" :disabled="spec.disabled" :label="spec.name" :value="spec.id" />
                  </el-select>
                  <el-link type="primary" slot="reference" :underline="false" @click="specValueName(item.specName)">添加规格值</el-link>
                </el-popover>
              </div>
            </div>
          </div>
          <el-popover placement="top" style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%)" width="160">
            <el-select v-model="selinfo" placeholder="添加规格" @change="getrow">
              <el-option v-for="item in options" :key="item.id" :disabled="item.disabled" :label="item.name" :value="item.name" />
            </el-select>
            <el-link type="primary" slot="reference" :underline="false">添加规格</el-link>
          </el-popover>
        </el-tab-pane>
      </el-tabs>
      <el-tabs style="margin-top: 20px" type="border-card">
        <el-tab-pane label="商品SKU">
          <div v-show="mapList.length > 0" class="ad" style="display: flex; gap: 15px; justify-content: space-around; margin-bottom: 20px">
            <div class="head_title">
              <div class="grid-content bg-purple" style="font-size: 14px; font-weight: bold">批量设置</div>
            </div>
            <div class="menu_btn" style="width: calc(100% - 120px)">
              <div style="display: grid; grid-template-columns: repeat(7, 1fr)">
                <div class="grid-content bg-purple">
                  <el-input-number v-model="batch.skuCode" controls-position="right" placeholder="sku编码" />
                </div>
                <div class="grid-content bg-purple">
                  <el-input-number v-model="batch.salesPrice" controls-position="right" placeholder="销售价(元)" :precision="2" :step="0.1" />
                </div>
                <div class="grid-content bg-purple">
                  <el-input-number v-model="batch.marketPrice" controls-position="right" placeholder="市场价（元）" :precision="2" :step="0.1" />
                </div>
                <div class="grid-content bg-purple">
                  <el-input-number v-model="batch.costPrice" controls-position="right" placeholder="成本价（元）" :precision="2" :step="0.1" />
                </div>
                <div class="grid-content bg-purple">
                  <el-input-number v-model="batch.stock" controls-position="right" placeholder="库存" />
                </div>
                <div class="grid-content bg-purple">
                  <el-input-number v-model="batch.weight" controls-position="right" placeholder="重量" />
                </div>
                <div class="grid-content bg-purple">
                  <el-input-number v-model="batch.volume" controls-position="right" placeholder="体积" />
                </div>
                <div style="margin-top: 10px">
                  <div class="grid-content bg-purple">
                    <el-input-number v-model="batch.firstRebate" controls-position="right" placeholder="一级返佣" />
                  </div>
                </div>
                <div style="margin-top: 10px">
                  <div class="grid-content bg-purple">
                    <el-input-number v-model="batch.secondRebate" controls-position="right" placeholder="二级返佣" />
                  </div>
                </div>
                <div style="margin-top: 10px">
                  <div class="grid-content bg-purple">
                    <el-button type="primary" @click="confirm">确认</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-table border :data="mapList" style="width: 100%">
            <el-table-column v-for="(item, index) in itemList" :key="index" align="center" :label="item.specName" width="88">
              <template slot-scope="scope">
                <div v-if="scope.row.specs[index]">{{ scope.row.specs[index].specValueName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="头图" prop="picUrl" width="50">
              <!-- <el-upload action="" list-type="picture-card" @on-preview="handlePictureCardPreview" @on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img alt="" :src="dialogImageUrl" width="100%" />
              </el-dialog> -->
            </el-table-column>
            <el-table-column align="center" label="sku编码" prop="skuCode" width="150px">
              <template #default="scope">
                <el-input v-model="scope.row.skuCode" placeholder="sku编码" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="销售价(元)" prop="salesPrice" width="150px">
              <template #default="scope">
                <el-input-number v-model="scope.row.salesPrice" controls-position="right" placeholder="销售价(元)" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="市场价(元)" prop="marketPrice" width="150px">
              <template #default="scope">
                <el-input-number v-model="scope.row.marketPrice" controls-position="right" placeholder="市场价(元)" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="成本价(元)" prop="costPrice" width="150px">
              <template #default="scope">
                <el-input-number v-model="scope.row.costPrice" controls-position="right" placeholder="成本价(元)" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="库存" prop="stock" width="150px">
              <template #default="scope">
                <el-input-number v-model="scope.row.stock" controls-position="right" placeholder="库存" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="重量(kg)" prop="weight" width="150px">
              <template #default="scope">
                <el-input-number v-model="scope.row.weight" controls-position="right" placeholder="重量(kg)" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="体积(m³)" prop="volume" width="150px">
              <template #default="scope">
                <el-input-number v-model="scope.row.volume" controls-position="right" placeholder="体积(m³)" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="一级返佣" prop="firstRebate" width="150px">
              <template #default="scope">
                <el-input-number v-model="scope.row.firstRebate" controls-position="right" placeholder="一级返佣" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="二级返佣" prop="secondRebate" width="150px">
              <template #default="scope">
                <el-input-number v-model="scope.row.secondRebate" controls-position="right" placeholder="二级返佣" />
              </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="是否启用" prop="enable" width="150px">
              <template #default="scope">
                <el-switch v-model="scope.row.enable" active-color="#13ce66" active-value="1" inactive-color="#ff4949" inactive-value="0" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <span style="display: flex; justify-content: center; margin-top: 20px">
          <el-button type="primary" @click="savebasic">下一步</el-button>
        </span>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import { specification, getList } from '@/api/mall/goods/goodsAdd'
  export default {
    data() {
      return {
        sku: [],
        inputValue: '',
        itemList: [],
        inpurIndex: 0,
        mapList: [],
        dialogImageUrl: '',
        dialogVisible: false,
        //补充代码
        options: [],
        selinfo: null,
        specaname: [],
        optionsvalue: [],
        Variable: true,
        checktags: null,
        batch: {
          skuCode: '',
          salesPrice: '',
          marketPrice: '',
          costPrice: '',
          stock: '',
          weight: '',
          volume: '',
          firstRebate: 50,
          secondRebate: 13,
        },
      }
    },
    created() {
      this.specifications()
    },
    methods: {
      specifications() {
        //  规格名请求
        specification({}).then((res) => {
          res.data.forEach((element, index) => {
            res.data[index].disabled = false
          })
          this.options = res.data
        })
      },
      getrow(row) {
        //规格名初始化
        let find = this.options.findIndex((item) => item.name === row)
        if (find > -1) {
          const matchedItem = this.options[find]
          this.$set(matchedItem, 'disabled', (matchedItem.disabled = true))
        }
        let specId = this.options.find((item) => item.name === row)
        this.specaname.push(row)
        let itList = {
          specName: row,
          specId: specId.id,
          specValueName: [],
        }
        this.itemList.push(itList)
        console.log(this.specaname)
      },
      // 聚焦判断是哪个数据
      focusConfirm(index) {
        this.inpurIndex = index
      },
      // 删除
      handleClose(index, ins) {
        let skuList = []
        this.itemList[index].specValueName.splice(ins, 1)
        for (var { specValueName } of this.itemList) {
          skuList.push(specValueName)
        }
        var att = this.composeTableData(skuList)
        this.mapList = att
      },
      //显示
      showInput(e) {
        this.inpurIndex = e
      },
      //输入组合
      handleInputConfirm(e) {
        let skuList = []
        let inputValue = this.inputValue
        let specValueId = this.optionsvalue.filter((item) => item.id === inputValue)
        if (inputValue) {
          this.itemList[this.inpurIndex].specValueName.push({
            specId: this.options[e].id,
            specName: this.options[e].name,
            specValueId: specValueId[0].id,
            specValueName: specValueId[0].name,
          })
          for (var { specValueName } of this.itemList) {
            skuList.push(specValueName)
          }
          var attList = this.composeTableData(skuList)
          console.log(attList)
          this.mapList = attList
        }
        this.inputValue = ''
      },
      // 排列组合
      cartesianProductOf() {
        return Array.prototype.reduce.call(
          arguments,
          function (a, b) {
            const result = [] // 存储拼接的结果
            a.forEach((item_a) => {
              b.forEach((item_b) => {
                result.push(item_a.concat(item_b))
              })
            })
            return result
          },
          [[]]
        )
      },
      composeTableData(sku_list) {
        console.log(sku_list)
        // 获取组合好的sku规格数据
        const arr = this.cartesianProductOf(...sku_list)
        return arr.map((item) => {
          return {
            specIds: '',
            specs: item, // 组合好的规格[{...},{...}]
            picUrl: '',
            picUrls: [],
            skuCode: '',
            salesPrice: '',
            marketPrice: '',
            costPrice: '',
            stock: '',
            weight: '',
            volume: '',
            firstRebate: 50,
            secondRebate: 13,
            enable: '1',
          }
        })
      },
      specValueName(e) {
        //规格值请求
        console.log(e)
        let find = this.options.findIndex((item) => item.name === e)
        if (find > -1) {
          const matchedItem = this.options[find]
          getList({ specId: matchedItem.id }).then((res) => {
            res.data.forEach((item) => {
              Object.assign(item, { disabled: false })
            })
            this.optionsvalue = res.data
          })
        }
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      savebasic() {
        this.$emit('Multiple', this.mapList)
      },
      //批量修改
      confirm() {
        const bat = Object.keys(this.batch)
        this.mapList.forEach((item) => {
          const mapList = Object.keys(item)
          bat.forEach((el) => {
            mapList.forEach((row) => {
              if (el == row) {
                item[el] = this.batch[el]
              }
            })
          })
        })
      },
    },
  }
</script>
<style scoped>
  .ym_thead {
    padding-bottom: 10px;
    border-bottom: 1px solid #f7f7f7;
  }
  .border-box {
    width: 180%;
    padding: 30px;
    margin: auto;
    /* height: 500px; */
  }
</style>

在这个里面着重的就是排序并切到table中其实和我们的输入状况一致只是将输入转变成为了select的形式

进阶的小趴菜
关注
使用vue实现多规格选择实例（SKU）
10-16
在本文中，我们将探讨如何使用Vue.js框架实现一个多规格选择功能，通常用于电商项目中的商品详情页面，如SKU（Stock Keeping Unit）。Vue.js是一个轻量级的前端JavaScript库，它提供了一种声明式的数据绑定和组件化...
Vue3+TypeScript项目（SKU管理模块）
m0_65435970的博客
04-02 1291
注意：在这里切换页码和切换每页数据条数的回调不同是因为：它们都能对函数注入数据，切换页码注入的是点击的页码数，因此我们可以直接使用getHasSku作为他的回调。切换每页数据条数注入的是切换的页码条数，我们希望切换后跳转到第一页，因此使用handler，间接调用getHasSku。无外乎API(type)，组件内发请求拿数据、将数据放到模板中。2：对数据结构的理解（可以将请求回来的数据放到正确的位置上）3：element-plus组件的使用。由于没有返回数据，所以没有ts类型。轮播图 carousel。
vue3 之 商城项目—封装SKU组件
Jasmin博客
02-18 2104
颜色 尺寸 产地都选择了。
Vue3商品SKU多规格编辑组件
luck332的专栏
09-07 922
SKU（Stock Keeping Unit）定义：SKU即库存量单位，是指宝贝的销售属性集合，供买家在下单时点选，如“规格”、“颜色分类”、“尺码”等。部分SKU的属性值可以由卖家自定义编辑，部分则不可编辑。功能：商品SKU多规格组件允许买家在商品详情页直接查看并选择商品的多种规格，同时展示每种规格对应的库存数量、价格等信息。这有助于买家快速了解商品的各种选项，并做出购买决策。
vue3+element-puls 实现商品sku
m0_65629667的博客
05-27 4715
只要是做电商类相关的产品，比如购物 APP、购物网站等等，都会遇到这么一个场景，每个商品对应着多个规格，用户可以根据不同的规格组合，选择出自己想要的产品。我们自己在生活中也会经常用到这个功能。
vue3-实战-09-管理后台-SKU模块开发
ycmy2017的博客
06-14 1605
vue3和typescript开发sku模块的相关功能
vue电商项目sku 规格 详细步骤
^_^
07-27 3664
一、概念及需求 SPU（Standard Product Unit）：标准化产品单元。是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。通俗点讲，属性值、特性相同的商品就可以称为一个SPU。 SKU（Stock Keeping Unit）库存量单位，即库存进出计量的单位， 可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理。 区别： SPU：属性值 特性相同的就是SPU 例如 ip.
sku多属性选择算法-基于vue
07-27
本项目“sku多属性选择算法-基于vue”是针对此类需求的一个解决方案，利用Vue.js这一现代前端框架来实现。Vue.js以其易学易用、组件化的特点，成为构建用户界面的热门工具。 首先，我们要理解SKU多属性选择的核心...
基于Vue的uniapp全网最受欢迎商品多规格SKU选择器组件设计源码
最新发布
09-26
该项目是一个基于Vue框架的uniapp商品多规格SKU选择器组件源码，涵盖24个文件，包括8个Vue文件、4个JSON文件、3个Markdown文件、2个JavaScript文件、1个Git忽略文件、1个npm忽略文件、1个LICENSE文件、1个HTML文件、...
使用vue实现sku选择
weixin_35751194的博客
12-23 456
<p>使用 Vue 实现 sku 选择需要以下步骤：</p> <ol> <li><p>建立 Vue 实例，并在 template 中定义展示商品 sku 的组件，通常是一个表格或者列表。</p> </li> <li><p>在 data 中定义一个变量用来存储当前选择的 sku，并初始化为一个...
vue使用笛卡尔积算法构建sku表格
m0_71933813的博客
03-14 886
判断如果规格长度等于0，直接把规格属性赋空，然后使用笛卡尔积算法将数据进行交叉处理（使用reduce方法，参数1：空的二维数组，参数2：变量2的数据(维度名称标签)，在声明一个空的数组array(用这个空数组去匹配交叉数组),再拿出reduce参数1空的二维数组，forEach循环遍历，在使用forEach遍历变量2数据(维度名称标签)，进行交叉匹配,连接起来添加进array空数组,然后在这个二维数组中重新映射为对象数组,进行拼接数据构建sku表格。变量1接收过滤的tag标签，生成二维数组组。
vue中SKU实现
Wx001214的博客
06-05 559
根据当前状态进行激活或取消激活的逻辑，通过为每个规格项添加的“selected”字段来标识是否激活，同时利用样式处理，通过动态类属性来直观地显示选中状态。：通过遍历规格对象，利用“name”字段与路径字典进行匹配来确定是否禁用，并通过增加“disabled”字段和动态类名来实现显示上的禁用效果。：以已选择项数组中不存在“undefined”来判断用户已选择所有有效规格，然后通过拼接已选数组为路径字典的键来获取相应的 SKU 信息对象。：基于库存情况来确定规格是否禁用，通过生成有效路径字典来简化匹配过程。
电商中的sku模块在项目中的实际运用(vue2)
qq_58715846的博客
10-24 1279
sku
前端 VUE 实现SKU(商品规格)
slow097的博客
10-28 4119
1.下面是后端返回的数据 2.下面是渲染数据以后传值和调用方法来确定选择的是哪个商品规格以及切换颜色 <div v-for="(item,index) in colorList" :key='index'> <div style="color: white;font-weight: bold;font-size: 20px;margin-top: 20px;" > {{item.label}}
vue+Element plus实现商品规格练习（sku列表）
m0_71933813的博客
04-22 1299
6.点击“刷新”按钮，对上面的规格进行组合，得到表格数据。4.点击“添加规格值”按钮，添加一组规格值内容。2.点击“添加规格”按钮，添加一组规格内容。5.点击“x”按钮，删除该规格值内容。3.点击“x”按钮，删除该规格内容。7.最多添加3组规格内容。
11、vue3（十一）：sku管理：商品上下架，商品详情，删除sku
鹏哥哥Aaa
12-11 913
sku管理：商品上下架，商品详情，删除sku
vue 实现商品规格选择(sku)
GuAng
12-23 4290
动手之前要先确定自己的商品数据结构，下面是我的商品数据结构 dataInfo: { attr: [ { attr_name: "码数", attr_value: [{attr: "40"}, {attr: "50"}], attr_values: ["40", "50"], }, { attr_name: "颜色",...
前端处理sku表格数据
Hgh_1997的博客
09-27 1040
function doExchange(arr, depth){ var dataArr = [ { sid:1, sname:'小米', fname:'手机' }, { sid:2, sname:'华为', fname:'手机' }, ...
vue-sku销售规格
09-14
Vue-Sku 是一个用于销售商品规格选择的 Vue.js 组件库。它可以帮助开发者在电子商务网站或应用中实现商品规格的选择和展示，并自动计算价格、库存等相关信息。 使用 Vue-Sku，你可以通过定义商品的不同规格选项（如颜色、尺寸等），以及每个规格选项的具体数值（如红色、绿色、XL、XXL 等），来创建一个可交互的商品规格选择界面。 Vue-Sku 提供了一套灵活的 API，可以根据你的需求进行定制和扩展。它还支持异步加载规格数据，以及根据用户选择的规格动态更新价格、库存等信息。 总之，Vue-Sku 是一个方便易用的工具，可以帮助开发者优雅地构建销售规格功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

进阶的小趴菜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值