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
上一篇:HIVE:谓词下推


下一篇:Spring Boot后端+Vue前端:打造高效二手车交易系统