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
随机推荐
- Apache Phoenix Flume集成 -- JsonEventSerializer改进
背景 数据从kafka ingest到Phoenix.数据格式采取Json.数据链路: api -> kafka -> Flume -> Phoenix 官方JsonEventSer ...
- WeexSDK之注册Modules
注册Modules的流程和注册Components非常类似. + (void)_registerDefaultModules { [self registerModule:@"dom&quo ...
- Rabbit RPC 代码阅读（一）
前言 因为想对RPC内部的机制作一个了解,特作以下阅读代码日志,以备忘. RPC介绍 Rabbit RPC 原理可以用3点概括: 1.服务端启动并且向注册中心发送服务信息,注册中心收到后会定时监控服务 ...
- HSmartWindowControl之安装篇 (Visual Studio 2013 & Halcon 18）
1.环境简介 Visual Studio 2013社区版 Halcon18.05 2.使用Nuget在VS工程中安装Halcon插件 搜索栏输入关键字halcon,出现两个插件,分别是halcon语言 ...
- Associative Containers
Notes from C++ Primer Associative containers differ in fundamental respect from the sequential conta ...
- 手动封装on，emit，off
on 绑定 emit 触发 off 解绑 //存放事件eventList = {key:valhandle:[]} 1对多on(eventName,callback);handle:-------N多 ...
- jQuery应用实例4：下拉列表
应用场景:左侧是已有商品,右侧是未有商品,选择其中的内容点击箭头即可互换: 点击大箭头则全部内容去另一边,或者双击已有商品的选项也会加入右边: 代码实现: <!DOCTYPE html> ...
- 机器学习技法笔记：04 Soft-Margin Support Vector Machine
Roadmap Motivation and Primal Problem Dual Problem Messages behind Soft-Margin SVM Model Selection S ...
- SQL求出优秀、及格人数
首先看看班级的表的数据: 接下来,由于班级有分linux .Mysql.Java三门科目,因此,先求Linux科目的及格人数.不及格人数和优秀人数 做一个语句的分解: 1.首先查出每个班级的班级ID ...
- linux日常运维常用命令
---查看端口占用 netstat -ap | grep 8000 ---重启nginx sudo /usr/sbin/nginx -c /usr/local/nginx/conf/nginx.con ...