vue规格新增一对多的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>规格测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(list,index) in list_init" :key="index">
<a class="btn_a" style="border: 0">{{list.name}}</a>
<a class="btn_a" @click="btn_a(list1, list.name)" v-for="(list1,index1) in list.content" :key="index1" style="border: 1px solid rgb(204, 204, 204)">
{{list1}}
</a>
<el-button type="primary" plain @click="addnew_content(list.content)">新增规格</el-button>
</li>
<li>
<el-button type="primary" plain @click="addnew_name">新增名称</el-button>
</li>
</ul>
<table style="margin-top: 50px;">
<tr>
<td>序号</td>
<td>规格</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr v-for="(list,index) in guige_see" :key="index" v-if="list.guige">
<td>
{{index + 1}}
</td>
<td>
{{list.guige}}
</td>
<td>
<el-input v-model="list.price" placeholder="请输入内容"></el-input>
</td>
<td>
<el-button @click="del_one(index)" type="danger" icon="el-icon-delete" circle></el-button>
</td>
</tr>
</table>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="30%">
<span v-if="guige_add_state">新增规格</span>
<span v-else>新增名称</span>
<h1></h1>
<el-input v-model="input" placeholder="请输入内容"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button v-if="guige_add_state" type="primary" @click="add_content">新增内容</el-button>
<el-button v-else type="primary" @click="add_name">新增名称</el-button>
</span>
</el-dialog>
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
list_init: [],
dialogVisible: false, // 弹框控制
guige_add_state: true, // 控制新增的名称或是规格
title: '', // 控制弹框标题
content: [], // 暂存规格内容
input: '', // 弹框的输入内容
guige_josn: [],
arr_cun: [],
guige_see: []
}
},
methods: {
btn_a (list1, name) {
var this_1 = this
var obj = event.target
var color = obj.style.borderColor
console.log(list1)
console.log(name)
if(color == 'rgb(204, 204, 204)'){
obj.style.border = '1px solid red'
if(this_1.guige_josn.length == 0){
console.log('没有数据')
this_1.guige_josn.push({
name: name,
content: [list1]
})
}else{
// 假如已经添加过了
var addstate = false
for(var i in this_1.guige_josn){
if(this_1.guige_josn[i].name == name){
console.log('已经添加过name')
var index = this_1.guige_josn[i].content.indexOf(list1)
if(index == -1){
this_1.guige_josn[i].content.push(list1)
} addstate = true
}
}
// 如果没添加过的
if(addstate == false){
console.log('没有添加过name')
this_1.guige_josn.push({
name: name,
content: [list1]
})
}
} console.log(this_1.guige_josn)
}
else{
color = 'rgb(204, 204, 204)'
obj.style.border = '1px solid rgb(204, 204, 204)'
for(var i in this_1.guige_josn){
if(this_1.guige_josn[i].name == name){
var index = this_1.guige_josn[i].content.indexOf(list1)
this_1.guige_josn[i].content.splice(index, 1)
if(this_1.guige_josn[i].content.length == 0){
delete this_1.guige_josn[i]
}
}
} }
this_1.computed_guige()
},
computed_guige () {
var this_1 = this
this_1.arr_cun = []
this_1.guige_see = []
for(var i in this_1.guige_josn){
this_1.arr_cun.push(this_1.guige_josn[i].content)
}
console.log('arr_cun')
console.log(this_1.arr_cun)
// 计算n个数组，每组取出一个,生成所以的序列
var arr = this_1.arr_cun
var sarr = [[]];
for (var i = 0; i < arr.length; i++) {
var tarr = [];
for (var j = 0; j < sarr.length; j++)
for (var k = 0; k < arr[i].length; k++)
tarr.push(sarr[j].concat(arr[i][k]));
sarr = tarr;
}
for(var i=0;i<sarr.length;i++){
sarr[i] = sarr[i].join(',')
}
for(var i in sarr){
this_1.guige_see.push({
guige: sarr[i],
price: ''
})
}
// this_1.guige_see = sarr
console.log(this_1.guige_see)
},
// 删除一个规格
del_one (index) {
var this_1 = this
console.log(index)
this_1.guige_see.splice(index, 1)
},
get_spec () {
var this_1 = this
$.ajax({
type: 'post',
data: '',
url: 'http://test.interface.carmanclub.com.cn/cym_back/backStage/goods/spec/findSpec',
success: function(json){
console.log(json)
this_1.list_init = json.data.list
for(var i in this_1.list_init){
this_1.list_init[i].content = this_1.list_init[i].content.split(',')
}
}
})
},
addnew_content (content) {
var this_1 = this
this_1.dialogVisible = true
this_1.guige_add_state = true
this_1.title = '新增规格'
this_1.input = ''
console.log(content)
this_1.content = content
},
add_content(){
var this_1 = this
if(this_1.input) this_1.content.push(this_1.input)
this_1.dialogVisible = false
},
addnew_name () {
var this_1 = this
this_1.input = ''
this_1.dialogVisible = true
this_1.guige_add_state = false
this_1.title = '新增名称'
},
add_name () {
var this_1 = this
if(this_1.input){
this_1.list_init.push({
name: this_1.input,
content: []
})
}
this_1.dialogVisible = false
}
},
mounted () {
var this_1 = this
this_1.get_spec()
var obj = [
{
name: '尺码',
content: ['X', 'L', 'M']
},
{
name: '颜色',
content: ['黑', '白']
},
{
name: '形状',
content: ['方', '圆', '正']
}
]
for(var i in obj){ }
}
})
</script>
<style>
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
.btn_a{
display: inline-block;
padding:10px;
margin: 10px;
}
.red{
border: 1px solid red;
}
td{
padding: 50px;
}
</style>
</body>
</html>
vue规格新增一对多的例子的更多相关文章
- 一个vue请求接口渲染页面的例子
new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name" ...
- vue 数组 新增元素 响应式原理 7种方法
1.问题 思考一个问题,以下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Vue动态新增对象属性
Vue.set( target, key, value ) 参数: {Object | Array} target {string | number} key {any} value 返回值:设置的值 ...
- vue+elementui 新增和编辑如何实现共用一个弹框
//html代码: //按钮 <el-button type="primary" size="medium" @click="addEquipm ...
- vue过滤器和监视器的小例子
过滤器其实就是一个函数,把当前的值传递到函数里面,加工处理后,返回到当前,过滤器使用|(管道符),默认传递参数,如果还要传递参数就要手动传递 过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第 ...
- vue+webpack项目中px2rem的例子
项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装 npm install postcss-px2r ...
- vue（1） 第一个例子
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- vue element 新增、编辑类Dialog公用函数
调用 <el-button type="primary" class="my-button" size="small" :loadin ...
- Vue组件间通信：一个例子学会Vue组件-Vue.js学习总结）（转载）
详情请点击 http://www.jianshu.com/p/9ad1ba89a04b
随机推荐
- 7.ASP.NET MVC 5.0中的Routing【路由】
大家好,这一篇向大家介绍ASP.NET MVC路由机制.[PS:上一篇-->6. ASP.NET MVC 5.0中的HTML Helpers[HTML帮助类] ] 路由是一个模式匹配系统,它确保 ...
- Lerning Entity Framework 6 ------ Working with in-memory data
Sometimes, you need to find some data in an existing context instead of the database. By befault, En ...
- 札记：Property动画
简介 Android 3.0 (API level 11)引入了属性动画系统,它是一个完善的框架,可以用来对几乎任何对象进行动画.只需要指定要动画的对象属性,动画时长,属性值区间等,无论对像是否在屏幕 ...
- JavaScript实现单张图片上传功能
前台jsp代码 <%@ page language="java" pageEncoding="UTF-8" contentType="text/ ...
- Java学习笔记39（转换流）
转换流:字符流和字节流之间的桥梁 用于处理程序的编码问题 OutputStreamWriter类:字符转字节流 写文本文件: package demo; import java.io.FileOutp ...
- 日志查看技巧之筛选&去重[排查篇]
引语:相信大家都会偶尔遇到要排查问题发生的原因的情况,那这种时候,我们最有力后盾就是日志文件了,所以谨记日志记录真的很重要.但是日志文件往往是很大的文件,而且里面有太多的东西可能不是我们需要的,如无数 ...
- Zabbix--1
ZABBIX 与其他监控程序比较.
- 【Spark调优】数据本地化与参数调优
数据本地化对于Spark Job性能有着巨大的影响,如果数据以及要计算它的代码是在一起的,那么性能当然会非常高.但是,如果数据和计算它的代码是分开的,那么其中之一必须到另外一方的机器上.移动代码到其匹 ...
- python中除法的几种类型
传统除法:直接后缀小数点,同样结果是和最大的小数点对齐 >>> 1/2 0 >>> 1.0/2 0.5 >>> 1/2.0 0.5 >> ...
- oracle中常见的对表、表空间和视图的操作
创建表:create table t1(key1 type default 0,key2 type not null) 删除表:drop table t1; 删除表数据:truncate table ...