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
随机推荐
- 虚拟机下Linux操作Ubuntu
备忘Ubuntu虚拟机环境配置 目录 更新源修改 #支持https的下载 apt 源使用 HTTPS 以确保软件下载过程中不被篡改.因此,我们首先需要添加使用 HTTPS 传输的软件包以及 CA 证书 ...
- 统计C/C++代码行数
近日在写一个统计项目中C/C++文件(后缀名:C/CPP/CC/H/HPP文件)代码行数的小程序.给定包含C/C++代码的目录,统计目录里所有C/C++文件的总代码行数.有效代码行数.注释行数.空白行 ...
- java visualVM(jconsole)远程监控服务器java进程
1. JMX方式(jconsole也可通过此方式进行连接) jmx方式能监控到CPU信息,但无法使用visualVM的visualVM GC插件 jmx无密码方式 监控普通的java进程 . 设 ...
- ubuntu 16.04 下更换boost版本
如果是新机器,没装过boost,那么直接一条命令 sudo apt-get install libboost-all-dev 头文件一般安装在 /usr/include 下面有一个目录boost,里面 ...
- Maven classifier 元素妙用
首先来看这么一个依赖 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json- ...
- centos7 安装oracle11g
创建数据库的系统用户和用户组 $ su root #切换到root # groupadd oinstall #创建用户组oinstall # groupadd dba #创建用户组dba # user ...
- The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar报错
缺少jstl依赖解析xml文件,报错jaspException 添加依赖如下: <dependency> <groupId>jstl</grou ...
- Oracle 插入时间时 报错：ORA-01861: 文字与格式字符串不匹配 的解决办法
一.写sql的方式插入到Oracle中 往oracle中插入时间 '2007-12-28 10:07:24'如果直接按照字符串方式,或者,直接使用to_date('2007-12-28 10:07: ...
- 六:理解控件的运行机制(例:基于WebControl命名空间的控件)
Control类的Render方法在WebControl类中被被分成三部分1:RenderBeginTag,呈现标签的开始2:RenderContents,呈现标签的内容3:RenderEndTag, ...
- Netty自带连接池的使用
一.类介绍1.ChannelPool——连接池接口 2.SimpleChannelPool——实现ChannelPool接口,简单的连接池实现 3.FixedChannelPool——继承Simple ...