vue+element 实现商品sku效果
在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能。实现的效果如下图
除成本、售价、库存、货号这几个写死的属性外,可自行添加/删除商品属性,自行添加删除商品sku。
PS:可自行修改这几个属性
话不多说,放码一战:
<div id="app">
<el-form ref="ruleForm" label-width="100px" class="demo-ruleForm" >
<el-form-item label="商品规格:" required>
<el-button @click="addNature" :disabled="!editType" type="success">增加属性</el-button>
<el-button @click="addSku" type="success">增加SKU</el-button>
<el-button @click="logData" type="success">打印tableData数据</el-button> </el-form-item>
<el-form-item>
<el-table :data="tableData" style="width: 100%">
<!-- 自定义部分 -->
<el-table-column v-for="(col,i ) in attr_names" :prop="col.prop">
<template slot="header" slot-scope="scope">
<span class="del" v-on:click="delColumn(scope.$index)" v-if="editType">X</span>
<el-input v-model="col.label" size="mini" class="f-cent" :disabled="!editType"/>
</template>
<template slot-scope="scope">
<el-input size="mini" v-model="scope.row[col.prop]" :disabled="!scope.row['editable']"> </el-input>
</template>
</el-table-column> <!-- 固定写死的部分 -->
<el-table-column prop="cost_price" label="成本">
<template slot-scope="scope">
<el-input size="mini" v-model="scope.row['cost_price']" :disabled="!scope.row['editable']"></el-input>
</template>
</el-table-column>
<el-table-column prop="price" label="售价">
<template slot-scope="scope">
<el-input size="mini" v-model="scope.row['price']" :disabled="!scope.row['editable']"></el-input>
</template>
</el-table-column>
<el-table-column prop="quantity" label="库存">
<template slot-scope="scope">
<el-input size="mini" v-model="scope.row['quantity']" :disabled="!scope.row['editable']"></el-input>
</template>
</el-table-column>
<el-table-column prop="no" label="货号">
<template slot-scope="scope">
<el-input size="mini" v-model="scope.row['no']" :disabled="!scope.row['editable']"></el-input>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="80">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index, tableData)"
type="text"
size="small" v-if="scope.row['editable']">
移除
</el-button>
</template>
</el-table-column> </el-table>
</el-form-item>
</el-form>
</div>
js部分
var app = new Vue({
el: "#app",
data: {
editType:true, //判定商品属性标签是否可编辑
attr_names: [
// 为了方便理解用 保留
// {label: '成本', prop: 'cost_price'},
// {label: '售价', prop: 'price'},
// {label: '库存', prop: 'quantity'},
// {label: '货号', prop: 'no'},
],
tableData:[
{
cost_price: '', //成本价
price: ' ',//售价
quantity: '',//库存
no: '',//货号
img:'',//图片
editable:true //判定SKU是否可编辑
}
],
},
methods: {
// 增加商品属性
addNature(){
let len=this.attr_names.length;
//新增以 attr_ 开关,也可以自行定义
this.attr_names.push({label: '商品属性', prop: `attr_${len}`})
},
// 增加商品SKU
addSku(){
let data=this.tableData[0]
let keys=[]
for (var key in data){
keys.push(key);
}
let obj={}
for(let i=0; i<keys.length; i++){
if(keys[i]==='editable'){
obj[keys[i]]=true
}else{
obj[keys[i]]=''
}
}
this.tableData.push(obj);
},
//删除一排 tableData ARR
deleteRow(index, rows) {
rows.splice(index, 1);
},
//删除SKU列 每次删除最后一列数据
delColumn(index){
let len=this.attr_names.length - 1 ;
let str=this.attr_names[len].prop;
this.tableData.map((item)=>{
delete item[str];
})
this.attr_names.pop()
},
// 调试代码信息用
logData(){
console.log('this.attr_names',this.attr_names);
console.log('this.tableData',this.tableData);
},
}
});
css
.del{
cursor: pointer;
display: none;
background: red;
color: #fff;
font-size: 10px;
padding: 2px 5px;
position: absolute;
top: 7px;
right: 0px;
z-index:;
border-radius: 3px;
}
.cell:hover .del{
display: inline;
}
代码很简单,都不难,主要讲解 editType/editable 这两个。在第一次发布商品sku时可忽略,但在编辑商品sku时就要注意了
editType:用于判断是否可添加删除商品的属于,例如商品发布过SKU,并已经有客户购买,那么该商品的属性值理应是无法更改的。
editable:用于判断商品该SKU是否可修改/删除,如iphone X 颜色:土豪金 内存:64G 已经有用户购买并生成购买订单(记录)。那么该条sku是不能更改/删除的。
vue+element 实现商品sku效果的更多相关文章
- 商品sku规格选择效果,没有商品的不能选中,选择顺序不影响展示结果
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...
- 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
- 循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)
在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...
- 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...
- Vue + Element 小技巧
说是小技巧 ,其实就是本人 就是一个小菜比 .如有大佬可以纠正,或者再救救我这个小菜比 跪谢 1.当后台返回一个字段需要根据不同字段内容在表格内显示相对应的文字(字段内容是死的,表格内需要显示对 ...
- jquery实现商品sku多属性选择(商品详情页)
转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 <!DOCTYPE HTML> <ht ...
- 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚
新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...
- GitHub Vue项目推荐|Vue+Element实现的电商后台管理系统功能丰富
GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表. ...
随机推荐
- PLC与上位机的socket通讯——ABB机器人程序(三)
源程序:https://github.com/935094505/ABB-socket-communication 程序范例 觉得有帮助,别忘了打赏下
- 超实用的SQL语句之嵌套查询
嵌套查询 什么是嵌套查询 . 嵌套查询的意思是,一个查询语句(select-from-where)查询语句块可以嵌套在另外一个查询块的where子句中,称为嵌套查询.其中外层查询也称为父查询,主查询. ...
- 控制执行流程之switch语句
switch语句,同时也是一种选择性语句,其根据整数表达式的值(整数选择因子)选择一段代码去执行.整数选择因子为int类型或者char类型.
- .netCore+Vue 搭建的简捷开发框架 (2)--仓储层实现和EFCore 的使用
书接上文,继续搭建我们基于.netCore 的开发框架.首先是我们的项目分层结构. 这个分层结构,是参考张老师的分层结构,但是实际项目中,我没有去实现仓储模型.因为我使用的是EFCore ,最近也一直 ...
- 【全网首创】修改 Ext.ux.UploadDialog.Dialog 源码支持多选添加文件,批量上传文件
公司老框架的一个页面需要用到文件上传,本以为修改一个配置参数即可解决,百度一番发现都在说这个第三方插件不支持文件多选功能,还有各种各样缺点,暂且不讨论这些吧.先完成领导安排下来的任务. 任务一:支持多 ...
- (七十四)c#Winform自定义控件-金字塔图表
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...
- pyenv的安装和简单使用
centos7.4 python2.7 安装pyenv需要的依赖 yum -y install gcc zlib-devel bzip2-devel openssl-devel ncurses-d ...
- Xshell无法连接Linux虚拟机问题
遇到的情况是,在虚拟机下安装了Linux后,xshell无法连接远程的虚拟机. 我遇到的情况是虚拟机可以ping 主机,主机确ping不了虚拟机. 使用的VM设置了两个网卡,一个nat 一个host ...
- 阿里云centos6.9搭建fastDFS文件服务器
准备压缩包: 1.fastdfs-nginx-module_v1.16.tar.gz 2.FastDFS_v5.05.tar.gz 3.libfastcommonV1.0.7.tar.gz 4.ngi ...
- 机器学习回顾篇(6):KNN算法
1 引言 本文将从算法原理出发,展开介绍KNN算法,并结合机器学习中常用的Iris数据集通过代码实例演示KNN算法用法和实现. 2 算法原理 KNN(kNN,k-NearestNeighbor)算法, ...