在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能。实现的效果如下图

除成本、售价、库存、货号这几个写死的属性外,可自行添加/删除商品属性,自行添加删除商品sku。

PS:可自行修改这几个属性

话不多说,放码一战:

template/html
  1. <div id="app">
  2. <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm" >
  3. <el-form-item label="商品规格:" required>
  4. <el-button @click="addNature" :disabled="!editType" type="success">增加属性</el-button>
  5. <el-button @click="addSku" type="success">增加SKU</el-button>
  6. <el-button @click="logData" type="success">打印tableData数据</el-button>
  7.  
  8. </el-form-item>
  9. <el-form-item>
  10. <el-table :data="tableData" style="width: 100%">
  11. <!-- 自定义部分 -->
  12. <el-table-column v-for="(col,i ) in attr_names" :prop="col.prop">
  13. <template slot="header" slot-scope="scope">
  14. <span class="del" v-on:click="delColumn(scope.$index)" v-if="editType">X</span>
  15. <el-input v-model="col.label" size="mini" class="f-cent" :disabled="!editType"/>
  16. </template>
  17. <template slot-scope="scope">
  18. <el-input size="mini" v-model="scope.row[col.prop]" :disabled="!scope.row['editable']"> </el-input>
  19. </template>
  20. </el-table-column>
  21.  
  22. <!-- 固定写死的部分 -->
  23. <el-table-column prop="cost_price" label="成本">
  24. <template slot-scope="scope">
  25. <el-input size="mini" v-model="scope.row['cost_price']" :disabled="!scope.row['editable']"></el-input>
  26. </template>
  27. </el-table-column>
  28. <el-table-column prop="price" label="售价">
  29. <template slot-scope="scope">
  30. <el-input size="mini" v-model="scope.row['price']" :disabled="!scope.row['editable']"></el-input>
  31. </template>
  32. </el-table-column>
  33. <el-table-column prop="quantity" label="库存">
  34. <template slot-scope="scope">
  35. <el-input size="mini" v-model="scope.row['quantity']" :disabled="!scope.row['editable']"></el-input>
  36. </template>
  37. </el-table-column>
  38. <el-table-column prop="no" label="货号">
  39. <template slot-scope="scope">
  40. <el-input size="mini" v-model="scope.row['no']" :disabled="!scope.row['editable']"></el-input>
  41. </template>
  42. </el-table-column>
  43. <el-table-column fixed="right" label="操作" width="80">
  44. <template slot-scope="scope">
  45. <el-button
  46. @click.native.prevent="deleteRow(scope.$index, tableData)"
  47. type="text"
  48. size="small" v-if="scope.row['editable']">
  49. 移除
  50. </el-button>
  51. </template>
  52. </el-table-column>
  53.  
  54. </el-table>
  55. </el-form-item>
  56. </el-form>
  57. </div>

js部分

  1. var app = new Vue({
  2. el: "#app",
  3. data: {
  4. editType:true, //判定商品属性标签是否可编辑
  5. attr_names: [
  6. // 为了方便理解用 保留
  7. // {label: '成本', prop: 'cost_price'},
  8. // {label: '售价', prop: 'price'},
  9. // {label: '库存', prop: 'quantity'},
  10. // {label: '货号', prop: 'no'},
  11. ],
  12. tableData:[
  13. {
  14. cost_price: '', //成本价
  15. price: ' ',//售价
  16. quantity: '',//库存
  17. no: '',//货号
  18. img:'',//图片
  19. editable:true //判定SKU是否可编辑
  20. }
  21. ],
  22. },
  23. methods: {
  24. // 增加商品属性
  25. addNature(){
  26. let len=this.attr_names.length;
  27. //新增以 attr_ 开关,也可以自行定义
  28. this.attr_names.push({label: '商品属性', prop: `attr_${len}`})
  29. },
  30. // 增加商品SKU
  31. addSku(){
  32. let data=this.tableData[0]
  33. let keys=[]
  34. for (var key in data){
  35. keys.push(key);
  36. }
  37. let obj={}
  38. for(let i=0; i<keys.length; i++){
  39. if(keys[i]==='editable'){
  40. obj[keys[i]]=true
  41. }else{
  42. obj[keys[i]]=''
  43. }
  44. }
  45. this.tableData.push(obj);
  46. },
  47. //删除一排 tableData ARR
  48. deleteRow(index, rows) {
  49. rows.splice(index, 1);
  50. },
  51. //删除SKU列 每次删除最后一列数据
  52. delColumn(index){
  53. let len=this.attr_names.length - 1 ;
  54. let str=this.attr_names[len].prop;
  55. this.tableData.map((item)=>{
  56. delete item[str];
  57. })
  58. this.attr_names.pop()
  59. },
  60. // 调试代码信息用
  61. logData(){
  62. console.log('this.attr_names',this.attr_names);
  63. console.log('this.tableData',this.tableData);
  64. },
  65. }
  66. });

css

  1. .del{
  2. cursor: pointer;
  3. display: none;
  4. background: red;
  5. color: #fff;
  6. font-size: 10px;
  7. padding: 2px 5px;
  8. position: absolute;
  9. top: 7px;
  10. right: 0px;
  11. z-index:;
  12. border-radius: 3px;
  13. }
  14. .cell:hover .del{
  15. display: inline;
  16. }

代码很简单,都不难,主要讲解  editType/editable 这两个。在第一次发布商品sku时可忽略,但在编辑商品sku时就要注意了

editType:用于判断是否可添加删除商品的属于,例如商品发布过SKU,并已经有客户购买,那么该商品的属性值理应是无法更改的。

editable:用于判断商品该SKU是否可修改/删除,如iphone X  颜色:土豪金  内存:64G 已经有用户购买并生成购买订单(记录)。那么该条sku是不能更改/删除的。

vue+element 实现商品sku效果的更多相关文章

  1. 商品sku规格选择效果,没有商品的不能选中,选择顺序不影响展示结果

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  3. 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

  4. 循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  5. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  6. Vue + Element 小技巧

    说是小技巧 ,其实就是本人 就是一个小菜比 .如有大佬可以纠正,或者再救救我这个小菜比    跪谢 1.当后台返回一个字段需要根据不同字段内容在表格内显示相对应的文字(字段内容是死的,表格内需要显示对 ...

  7. jquery实现商品sku多属性选择(商品详情页)

    转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 <!DOCTYPE HTML> <ht ...

  8. 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  9. GitHub Vue项目推荐|Vue+Element实现的电商后台管理系统功能丰富

    GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表. ...

随机推荐

  1. urllib2爬取图片成功之后不能打开

    经过8个小时的摸索,终于决定写下此随笔! 初学爬虫,准备爬取百度美女吧的图片,爬取图片之后发现打不开,上代码: import urllib import urllib2 from lxml impor ...

  2. 搜索专题题解(FJUT - OJ 17级搜索强化训练)

    题目连接:http://120.78.128.11/Contest.jsp?cid=221#H 题目都比较难,每道题都很经典,我也做的很慢,这篇博文算是个收录.具体题目题解点击下面超链接吧. 一.Br ...

  3. STL中bitset的用法

    终于又来写博客了 == bitset存储的是二进数位,就和一个bool性数组差不多.用法上和数组的操作方式也差不多. 每位只占一个字节,大大优化了空间,可以通过数组形式访问. bitset定义 可以用 ...

  4. 松软科技课堂:索引器计时器Timer

    在.NET中有三种计时器:1.System.Windows.Forms命名空间下的Timer控件,它直接继承自Componet.Timer控件只有绑定了Tick事件和设置Enabled=True后才会 ...

  5. TestNG(七)组测试

    package com.course.testng.groups; import org.testng.annotations.AfterGroups; import org.testng.annot ...

  6. Elasticsearch(10) --- 内置分词器、中文分词器

    Elasticsearch(10) --- 内置分词器.中文分词器 这篇博客主要讲:分词器概念.ES内置分词器.ES中文分词器. 一.分词器概念 1.Analysis 和 Analyzer Analy ...

  7. JQuery入门学习笔记(全)

    jQuery 语法 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 元素 $("p.test").hide() - 隐 ...

  8. Linux——基本命令

    目录 一.目录切换命令 二.目录操作命令(增删改查) 2.1增加目录 2.2查看目录 2.3寻找目录(搜索) 2.4修改目录名称 2.5移动目录位置(剪切) 2.6拷贝目录 2.7删除目录 三.文件的 ...

  9. Linux——服务器版本安装 (VMware)

    一.Linux简介 Linux是一套免费使用和自由传播的类UNIX操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网 ...

  10. C语言复习————基本数据类型、运算符和表达式

    数据类型/运算符/表达式 主要分两部分介绍,第一部分介绍常用的数据类型,例如:常量和变量/整型/实型/字符型:第二部分介绍算数运算符和算数表达式以及赋值运算符和逗号运算符. 一. 常用的数据类型 1. ...