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实现商品sku多属性选择（商品详情页）
转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 <!DOCTYPE HTML> <ht ...
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...
- js实现的笛卡尔乘积-商品发布
//笛卡儿积组合 function descartes(list) { //parent上一级索引;count指针计数 var point = {}; var result = []; var pIn ...
- vue自定义表单生成器,可根据json参数动态生成表单
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
- vue+element 实现商品sku效果
在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能.实现的效果如下图 除成本.售价.库存.货号这几个写死的属性外,可自行添加/删除商品属性,自行添加 ...
- B2C电子商务系统研发——商品SKU分析和设计（一）
一.SKU及相关概念定义 在设计商品SKU之前,首先让我们熟悉一下SKU和相关的一些概念. # 什么是SKU: SKU=Stock Keeping Unit(库存量单位) 同一型号的商品,或者说是同一 ...
- 笛卡尔遗传规划Cartesian Genetic Programming (CGP)简单理解(1)
初识遗传算法Genetic Algorithm(GA) 遗传算法是计算数学中用于解决最优化的搜索算法,是进化算法的一种.进化算法借鉴了进化生物学中的一些现象而发展起来的,这些现象包括遗传.突变.自然选 ...
- 一个商品SKU是怎么生成的
首先说一说什么是SKU.......自己百度去... 类似京东上面,未来人类S5这个台笔记本(没错,我刚入手了) 都是S5这个型号,但是因为CPU,显卡,内存,硬盘等不同,价格也不一样.CPU,显卡, ...
随机推荐
- WPF之认识XAML
目录 新建项目 剖析XAML代码 参考资料 新建项目 在Visual Studio 2019中使用WPF项目模板建立一个最简单的WPF项目,如下图所示: 可以看到,项目里面主要有两个分支: App.x ...
- stm32文件系统读写操作调试总结
一 问题 最近使用到了文件系统的读写,中间遇到了一些问题值得深思. 二 源码解析 创建文件: FRESULT res; do { sprintf(filename,"/sensor_si ...
- idea提交时候忽略改动部分文件
之前因为本地开发环境和线上开发环境有区别,bootstrap.xml里的log存放位置在我本地mac不存在路径,我就只能通过修改log路径才能让项目跑起来.但是,本地修改的东西每次commit时候都显 ...
- Mysql范式
什么是范式? "范式(NF)"是"符合某一种级别的关系模式的集合,表示一个关系内部各属性之间的联系的合理化程度".很晦涩吧?实际上你可以把它粗略地理解为一张数据 ...
- 常用命令--复制-备份--cp--mv--scp--rsync
常用命令--复制-备份--cp--mv--scp--rsync cp cp命令用来将一个或多个源文件或者目录复制到指定的目的文件或目录.它可以将单个源文件复制成一个指定文件名的具体的文件或一个已经存在 ...
- 记录--居中为什么要使用 transform？
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 引言 居中是我们在前端布局中经常会遇到的问题,其中包括水平居中和垂直居中.居中的方法很多,比如说水平居中可以使用text-align: c ...
- 记录--前端路由 hash 与 history 差异
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 简单介绍 Vue Router Vue Router 是 Vue.js 官方的路由插件,它和 Vue.js 是深度集成的,适合用于构建单页 ...
- python实现批量运行命令行
python实现批量运行命令行 背景: 对于不同参数设置来调用同一个接口,如果手动一条条修改再运行非常慢且容易出错.尤其是这次参数非常多且长.比如之前都是输入nohup python -u exe.p ...
- Springboot Mybatis 全局变量使用
application.properties中配置 mybatis.configuration.variables.k1='v1' mybatis.configuration.variables.k2 ...
- 用cmd检查端口关闭命令
1.进入cmd 2.netstat -o -n -a | findstr :8080 TCP 0.0.0.0:3000 0.0.0.0:0 LISTENING 3116 3.taskkill /F / ...