vue 商品sku，笛卡尔算法，商品添加。动态生成table，table添加值后 再生成的table 不改变table之前输入的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style type="text/css">
.Multiple-specifications {
margin: 18px 0 0 0;
} .Specification-list {
margin: 18px 0 0 0;
} .img_marsk {
width: 80px;
height: 80px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
z-index: 999999;
top: 0px;
left: 0;
display: flex;
justify-content: center;
align-items: center;
} .checkout_icon {
padding: 3px;
display: inline-block;
font-size: 16px;
margin-right: 10px;
;
text-align: center;
position: relative;
border-radius: 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div>
<div>
<!-- 多规格 -->
<div class="Multiple-specifications">
<el-card title="多规格" style="border-radius: 10px;">
<div style="display: flex;flex-flow: row wrap;">
<div v-for="(item, index) in dragData" :key="index">
<div label="规格名" :rules="{required: true, message: '请输入规格名',trigger: 'blur'}">
<div>
<el-input v-model="item.title" placeholder="规格名" style="width:200px"
@change="makenewTabel(item, 'ruleName', '')" ></el-input>
<el-button @click="deletRow(index, item)">删除</el-button>
</div>
</div>
<div label="规格值" :rules="{required: true, message: '请输入规格值',trigger: 'blur'}">
<div v-for="(it, ix) in item.num" :key="ix" style="margin-left: 20px;">
<div>
<el-input v-model="it.value" placeholder="规格值" style="width:200px"
@change="makenewTabel(item, 'value', it)" ></el-input>
<el-button @click="deletNum(ix, it, item, index)">删除</el-button>
</div>
</div>
</div>
<div @click="addSku(index)">+添加规格值</div>
</div>
</div>
<div @click="addOtherSku">+添加其他规格
</div>
</el-card>
</div>
<!-- 规格列表 -->
<div class="Specification-list">
<el-card title="规格列表" style="border-radius: 10px;">
<el-table :data="duoTableData">
<el-table-column v-for="(val, key) in columns2" :key="key" :prop="val.dataIndex" :label="val.title">
<template slot-scope="scope">
<el-input placeholder="请输入" v-model="scope.row[val.dataIndex]" @blur="emitTableData"></el-input>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</div>
</div>
</div>
</body>
<!-- 引入vue mete -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app', data() {
return {
tableData:[],
duoTableData: [],
dragData: [],
columns2: [],
columns: [],
specificationListdata: [],
}
},
created() {
this.initDrag()
this.columns = [
{
title: `售价(US$})`,
dataIndex: 'salesPrice',
},
{
title: `原价(US$})`,
dataIndex: 'originalPrice',
},
{
title: '重量',
width: '180',
},
{
title: '库存数量',
dataIndex: 'goodsStock',
},
{
title: 'SKU（货号）',
dataIndex: 'skuNo',
},
{
title: '条形码',
dataIndex: 'barCode',
},
{
title: '操作',
dataIndex: 'action',
}
]
this.resetColumns()
},
methods: {
// 重置表头
/***
* dragData的默认数据
*/
initDrag() {
this.dragData = this.tableData.length > 0 ? JSON.parse(JSON.stringify(this.tableData)) : [{
title: '',
oldTitle: '',
num: [{
value: '',
oldValue: ''
}]
}]
// 如果是新增取消确定 // 或者单规格，就要清空表头and 表格数据
// 把old 也要清空
this.duoTableData = []
},
/**
* 得到列
*/
resetColumns() {
const rules = []
for (var j = 0; j < this.dragData.length; j++) {
const obj = {}
obj.title = this.dragData[j].title
obj.dataIndex = `newHead${obj.title}`
rules.push(obj)
}
const columns = [...this.columns]
columns.splice(1, 0, ...rules)
this.columns2 = columns
},
async deletRow(index, item) {
if (item.title) {
const ret = await this.$confirm(`确定要删除 ${item.title} 规格？`)
if (!ret) {
return false
}
}
this.dragData.splice(index, 1)
this.tableData = this.dragData
this.makenewTabel(item, 'deleteRule', index)
},
async deletNum(index, ix, item, iii) {
if (item.num < 1) {
this.$message.error('必须有一个规格值', 2)
return false
}
if (ix.value) {
let title = `确定要删除 ${item.title} 规格中的 ${ix.value}？`
if (!item.title) {
title = `确定要删除 ${ix.value} 规格值？`
}
const ret = await this.$confirm(title)
if (!ret) {
return false
}
}
this.dragData[iii].num.splice(index, 1)
this.makenewTabel(item, 'deleteRule', ix)
},
addSku(index) {
this.dragData[index].num.push({
value: '',
oldValue: ''
})
},
addOtherSku() {
this.dragData.push({
title: '',
oldTitle: '',
num: [{
value: '',
oldValue: ''
}]
})
},
/** 按规格得到笛卡尔乘积列表 handleList */
getDecareList() {
const ret = []
if (this.dragData.length === 0) {
return ret
} else if (this.dragData.length === 1) {
for (var m = 0; m < this.dragData[0].num.length; m++) {
const e = {}
e[`newHead${this.dragData[0].title}`] = this.dragData[0].num[m].value
e['weightUnit'] = 'g'
e['goodsStock'] = 0
ret.push(e)
}
return ret
}
// 展开table中的数据
const arr1 = this.dragData.map((item) => {
const res = []
item.num.forEach(v => {
res.push({
value: v.value,
ruleName: item.title
})
})
return res
})
// 构造笛卡尔乘积
const r = arr1.reduce((col, row) => {
const res = []
col.forEach(c => {
row.forEach(r => {
const t = Array.isArray(c) ? [...c] : [`#${c.ruleName}#${c.value}`]
t.push(`#${r.ruleName}#${r.value}`)
res.push(t)
})
})
return res
})
const pattern = new RegExp('#([^#]+)#(.*)')
let match = [] for (var i = 0; i < r.length; i++) {
const e = {}
for (var k = 0; k < r[i].length; k++) {
match = pattern.exec(r[i][k])
if (match) {
e[`newHead${match[1]}`] = match[2]
e['weightUnit'] = 'g'
e['goodsStock'] = 0
}
}
ret.push(e)
}
return ret
},
/*** 规格生成 */
makenewTabel(item, type, value) {
this.resetColumns()
// 深拷贝一个值
const copyListData = JSON.parse(`${JSON.stringify(this.duoTableData)}`)
// 得到笛卡尔列
const specificationListdata = this.getDecareList()
const oldDataList = {}
let speckey = []
// 原值
let key = ''
let title = ''
// 得到规格名用于data中旧的规格信息
const ruleNames = this.dragData.map(table => {
return `newHead${table.title}`
})
copyListData.forEach(data => {
speckey = []
this.dragData.forEach(table => {
// 值变化
title = `newHead${table.title}`
key = data[title]
if (!key) {
if (type === 'value') {
data[title] = value.value
key = value.value
}
}
if (type === 'value' && table === item && key === value.oldValue) {
data[`newHead${table.title}`] = value.value
key = value.value
} else {
if (type === 'ruleName' && table === item) {
data[`newHead${table.title}`] = data[`newHead${table.oldTitle}`]
key = data[`newHead${table.oldTitle}`]
}
}
speckey.push(key)
})
// 删除原来的旧列原来的旧值
Object.keys(data).forEach(key => {
if (key.startsWith('newHead') && !ruleNames.includes(key)) {
delete data[key]
}
})
oldDataList[speckey.join('-')] = data
})
// 新值
const temps = specificationListdata
temps.forEach((data, index) => {
speckey = []
this.dragData.forEach(table => {
speckey.push(data[`newHead${table.title}`])
})
key = speckey.join('-')
if (oldDataList[key]) {
temps[index] = oldDataList[key]
}
})
this.duoTableData = temps
if (type !== 'reset') {
if (type === 'value') {
value.oldValue = value.value
} else {
item.oldTitle = item.title
}
}
},
// 每次失去焦点后，把值emit
emitTableData() {
const emitData = {
tableData: this.tableData,
specificationListdata: this.specificationListdata
}
},
} });
</script>
</html>
vue 商品sku，笛卡尔算法，商品添加。动态生成table，table添加值后 再生成的table 不改变table之前输入的值的更多相关文章
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...
- js实现的笛卡尔乘积-商品发布
//笛卡儿积组合 function descartes(list) { //parent上一级索引;count指针计数 var point = {}; var result = []; var pIn ...
- B2C电子商务系统研发——商品SKU分析和设计（一）
一.SKU及相关概念定义 在设计商品SKU之前,首先让我们熟悉一下SKU和相关的一些概念. # 什么是SKU: SKU=Stock Keeping Unit(库存量单位) 同一型号的商品,或者说是同一 ...
- 笛卡尔遗传规划Cartesian Genetic Programming (CGP)简单理解(1)
初识遗传算法Genetic Algorithm(GA) 遗传算法是计算数学中用于解决最优化的搜索算法,是进化算法的一种.进化算法借鉴了进化生物学中的一些现象而发展起来的,这些现象包括遗传.突变.自然选 ...
- vue+element 实现商品sku效果
在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能.实现的效果如下图 除成本.售价.库存.货号这几个写死的属性外,可自行添加/删除商品属性,自行添加 ...
- 一个商品SKU是怎么生成的
首先说一说什么是SKU.......自己百度去... 类似京东上面,未来人类S5这个台笔记本(没错,我刚入手了) 都是S5这个型号,但是因为CPU,显卡,内存,硬盘等不同,价格也不一样.CPU,显卡, ...
- Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案
需求场景: 非推荐商品详情页返回的时候弹出弹窗推荐商品,点击弹窗按钮可以直接访问推荐商品: 只有直接进入商品详情页返回才会弹出推荐商品弹窗: 每个用户访问只能弹一次(除非清除缓存). 需求分析: 1. ...
- Vue小案例 之 商品管理------批量删除与商品数量的调整
通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...
随机推荐
- C#版开源免费的Bouncy Castle密码库
前言 今天大姚给大家分享一款C#版开源.免费的Bouncy Castle密码库:BouncyCastle. 项目介绍 BouncyCastle是一款C#版开源.免费的Bouncy Castle密码库, ...
- vue peek 解决了 vue-template 加载 相对目录 ./components 组件内容 vscode
点击组件跳转,vue-helper 带@的能跳转,相对目录的不能跳转.vue peek 解决了这个问题.
- 使用JdbcTemplate
1.使用JdbcTemplate的execute()方法执行SQL语句 Java代码 收藏代码 jdbcTemplate.execute("CREATE TABLE USER (user_ ...
- 单点登录之CAS简单介绍
cas官网http://www.ja-sig.org/products/cas/. ok,现在开始本文的重点内容讲解,先来了解一下cas 实现single sign out的原理,如图所示: ...
- 什么是3D可视化，为什么要使用3D可视化
虽然许多设计师听说过为什么设计的可视化在他们的审批过程中是有益的,但并不是每个人都知道3D可视化到底是什么. 3D可视化与3D图形.3D渲染.计算机生成图像和其他术语同义使用.3D可视化是指使用计算机 ...
- 在 PostgreSQL 中，解决图片二进制数据，由于bytea_output参数问题导致显示不正常的问题。
在 PostgreSQL 中,bytea_output 参数控制在查询结果中 bytea 类型的显示格式.默认情况下,bytea_output 的值为 hex,这意味着在查询结果中,bytea 类型的 ...
- 使用Dockerfile部署springboot打包jar包
1.docker下载JDK1.8镜像 docker pull java:8 2.进行需要编译的镜像文件目录编写Dockerfile文件 #依赖的父镜像FROM java:8#作者MAINTAINER ...
- KingbaseES V8R6集群备份恢复案例之---备份初始化“can not find primary node”故障
案例说明: KingbaseES V8R6集群,备库作为repo-path节点,建立类型为'cluster'模式的备份,在执行sys_backup.sh init时,出现"can not f ...
- 性能测试思想（What is performance testing？）
1.什么是性能测试 什么是软件性能? 定义:软件的性能是软件的一种非功能特性,它关注的不是软件是否能够完成特定的功能,而是在完成该功能是展示出来的及时性. 比如:一个登录功能他能实现登录操作,但是登录 ...
- #贪心#洛谷 6927 [ICPC2016 WF]Swap Space
题目 分析 可以发现能将硬盘容量变大的优先,这种硬盘就是以格式化前的大小升序排序. 然后如果硬盘容量变小,那就是先填格式化后较大的硬盘(因为装完可以提供较大的空间) 代码 #include <c ...