Vue后台管理系统项目(32)SpuForm销售属性的数据展示

最新推荐文章于 2024-06-21 09:51:28 发布
最新推荐文章于 2024-06-21 09:51:28 发布
阅读量513 收藏
点赞数
分类专栏： vue后台管理项目 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/125360061
版权
本文档详细介绍了在一个Vue项目中如何展示和管理销售属性，如颜色、尺码和版本。涉及到表格展示、数据收集、操作栏功能实现，以及未选择属性的计算方法。同时，使用了ElementUI组件库进行界面构建，并通过Gitee仓库分享代码片段。目前，已实现销售属性的动态展示，但还需完善数据同步和删除功能。
摘要由CSDN通过智能技术生成

目录

展示有几列

展示属性名

展示属性名称列表

销售属性的展示

gitee仓库地址:

https://gitee.com/CMD-UROOT/my_project/commits/master

大家根据上传历史进行查找你需要的代码

spu图片我们只是完成了照片墙的展示,但是对于数据的收集还没有做,比如我们删除了已经有的图片,那么我们需要收集数据提交给服务器,或者我们新增了图片也需要收集数据提交给服务器

现在我们要完成的是销售属性的数据的展示

整个项目当中销售属性一共三个：颜色、尺码、版本

我们从数据中可以看到saleAttrList是平台的销售属性,我们现在需要把已有的销售属性展示出来

展示有几列

我们从数据中可以知道任何毅哥spu都有属于自己的销售属性,并且我们在页面中是用table来展示相应的销售属性和属性值,table所需要的数据一定是数组

 在views/product/Spu/SpuForm/index.vue中: 

最低0.47元/天 解锁文章
学无止境QAQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
vue-sku-form 基于 Vue & ElementUI 的电商 SKU 表单配置组件 你或许感兴趣 一款开箱即用的 Vue 中后台管理系统框架
后台配置商品规格sku（vue+element）
Harrietjia的博客
10-10 5905
效果gif： 主要数据结构： 规格项： goodsSpecs: [ { attr:"颜色", valueList:[{"title": "红"},{"title": "黄"}]}, { attr:"尺寸", valueList:[{"title": "大"},{"title": "中"},{"title": "小"}] } ] table表格头默认的数据： tableHeaderList: ['stock', 'withhold_stock', 'market_pric.
【强力推荐】vue-sku-form：电商开发新神器，Vue界的SKU表单魔方！
最新发布
gitblog_00096的博客
06-21 504
【强力推荐】vue-sku-form：电商开发新神器，Vue界的SKU表单魔方！ 项目地址:https://gitcode.com/hooray/vue-sku-form 在电商领域，灵活且高效的SKU（Stock Keeping Unit, 库存量单位）管理是至关重要的一环。今天，我们要向大家隆重推荐一个基于Vue.js与ElementUI的开源项目——vue-sku-form。这不仅是一个工具...
vue动态增加商品属性
weixin_45298700的博客
03-25 1638
vue+element ui实现动态增加商品sku 实现逻辑（循环遍历数组，通过push来增加属性，通过splice移出属性） html <div> <el-row class="catySet"> <el-col :span="6"> ...
php sku 表单提交,vue-sku-form 一款电商 SKU 表单配置组件
weixin_42493118的博客
03-16 694
先来一张图快速了解下组件形态快速上手因为 vue-sku-form 基于 ElementUI 开发，安装使用前确保项目中已正确安装 ElementUI# 推荐使用 yarn 进行安装yarn add vue-sku-form# 或者使用 npm 也无伤大雅npm install vue-sku-form安装完成后，可以选择全局引入或者局部引入。全局引入需要在 main.js 中增加以下内容：imp...
vue-sku-form自定义验证的方法
weixin_66097575的博客
12-23 324
vue-sku-form
基于Vue的iView后台管理系统设计源码
05-22
iView后台管理系统设计源码：该项目基于Vue开发，包含198个文件，主要使用JavaScript、Vue、HTML和CSS语言。iView admin是一套基于Vue.js和iView UI组件库的后台集成解决方案，旨在为开发者提供一套功能完善、易于...
Vue后台管理系统实现权限控制
05-17
本教程将深入探讨如何使用Vue.js和element-ui组件库实现一个完善的后台管理系统的权限控制机制。Vue.js是一个轻量级的前端框架，而element-ui则为Vue提供了丰富的UI组件，axios则常用于处理HTTP请求，Vuex则是Vue的...
基于Vue的后台管理系统模板
02-18
基于Vue的后台管理系统模板，是开发者为了快速搭建企业级后台应用而设计的一套框架结构，它可以帮助开发者节省大量的初始化工作，集中精力于业务逻辑的实现。 Vue的核心特性包括： 1. **虚拟DOM**：Vue通过虚拟DOM...
基于Vue和ElementUI的后台管理系统设计源码
04-05
本资源提供了一套基于Vue和ElementUI的后台管理系统的设计源码，包含91个文件，其中包括23个JavaScript脚本文件，22个Vue组件文件，以及20个PNG图片文件。此外，还包括4个映射文件，3个TTF字体文件，2个HTML页面文件...
基于vue + element UI 的后台管理系统模板
09-12
后台管理系统模板是预配置的一套框架，通常包含登录、用户管理、权限控制、数据展示等功能模块，方便开发者快速搭建后台应用。这个模板使用了Vue和Element UI，为开发者提供了现成的界面元素和布局，减少了从零开始...
基于Vue实现电商SKU组合算法问题
01-21
前段时间，公司要做“添加商品”业务模块，这也算是电商业务里面的一个难点了。 令我印象最深的不是什么“组合商品”、“关联商品”、“关联单品”，而是商品SKU的组合问题。 这个问题特别有意思，当时虽然大体上组合成功，总是有些小bug解决不了，然后手上又有别的任务就没仔细研究它。 后来过了一个月，空闲下来专门研究了下，终于把问题解决，有必要记录下这次体验。 先看下在业务中的效果（tips: 如看不清可放大浏览器） 这个相对来说比较麻烦，还涉及到了下面“属性图片”的循环，但关键点还是在SKU组合的代码上面 以下是基于element-ui和vue的精简版demo代码： html: SKU组
使用vue实现多规格选择实例（SKU）
12-12
做过商城项目的小伙伴们，相信大家多多少少都会接触到规格选择这个模块，也就是所说的SKU。 公司最近在做一个下单系统，这里面就涉及到这个SKU，说实话之前我是没有写过这个的，刚开始也是有点迷茫把，不知道该如何下手，因为要考虑到后端那边返回的数据结构、库存、多规格等等问题，然后各种百度，各种搜集资料，才慢慢懂了其中的逻辑，下面我就简单写个demo吧。 首先逻辑得清晰 定义一个数组把选中的值存储起来。 定义一个对象存储要匹配的数据。 把选中的值与存储的数据进行遍历查找与之匹配的值的库存，若库存为0按钮为灰色不能选择。 上代码 秒懂 哈哈 1.html <
vue处理sku的一种方法（返回已有库存组合好的）
qq_43427385的博客
05-26 1033
总体实现思路 接口获取现有库存列表以及sku规格属性列表（坑：库存可能存在某个商品规格没有，所以最全的规格属性应该是接口获取的，而不是渲染库存得到的） sku规格属性列表与库存列表对比，将没有库存的选项置灰 点击某一个具体的属性，将其置为已选状态或取消已选状态 循环规格属性列表，将disabled置为true，然后拿所有规格属性的每一项分别与已选中的数据的每一项，组成一个新的比较项，与现有库存比较，找到存在的可点项，将可点击项置disable置为false 库存列表为： [ “小,绿,one”, “小,绿.
Vue+Element+设置商品规格SKU
不同场景下的水平居中
12-29 5464
规格效果图： 实现思路：设置商品规格 填写商品规格后，会得到规格名 privateSpecName 和规格值 dynamicTags。如： this.privateGoodsItem = [ { privateSpecName:'颜色', dynamicTags:['红','蓝'] }, { privateSpecName:'尺寸', dynamicTags:['12'] }, { privateSpecName:'面料', dyna
前端 VUE 实现SKU(商品规格)
slow097的博客
10-28 4090
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使用笛卡尔积算法构建sku表格
m0_71933813的博客
03-14 856
判断如果规格长度等于0，直接把规格属性赋空，然后使用笛卡尔积算法将数据进行交叉处理（使用reduce方法，参数1：空的二维数组，参数2：变量2的数据(维度名称标签)，在声明一个空的数组array(用这个空数组去匹配交叉数组),再拿出reduce参数1空的二维数组，forEach循环遍历，在使用forEach遍历变量2数据(维度名称标签)，进行交叉匹配,连接起来添加进array空数组,然后在这个二维数组中重新映射为对象数组,进行拼接数据构建sku表格。变量1接收过滤的tag标签，生成二维数组组。
vue 后台管理系统项目下载
12-28
Vue后台管理系统是一个基于Vue.js开发的管理系统项目，主要用于管理后台的用户、权限、数据等业务。你可以在GitHub等开源平台上找到并下载这样的项目。 首先，你可以在GitHub上搜索“vue后台管理系统”或者“vue admin”，会有很多开源的项目可供选择。在搜索结果中可以筛选评分高、星级多的项目，通常这些项目质量和稳定性会比较好。 其次，找到你感兴趣的项目之后，可以进入项目的页面，找到下载或者Clone的按钮，点击后就可以将项目代码下载到本地。 下载项目后，你可以通过命令行工具进入项目目录，使用npm install命令安装项目的依赖包。安装完成后，再使用npm run dev命令启动项目，就可以在本地预览和体验这个Vue后台管理系统项目了。 当然，如果你希望对项目进行定制化开发，可以根据自己的需求进行相应的修改和优化。当然，如果你希望对项目进行二次开发，你还可以与原作者进行联系，或者参与项目的贡献，共同推动项目的发展。 总的来说，下载Vue后台管理系统项目非常简单，只需要找到适合自己的开源项目并按照流程进行下载安装即可。希望你在使用和定制化这样的项目时能够顺利实现你的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值