#table-wrap {
width: 800px;
margin: 0 auto;
}
#table-wrap table {
width: 100%;
}
#table-wrap table td {
border: 1px solid #ccc;
text-align: center;
}
#opr-wrap input[type=text] {
width: 400px;
}
#add-wrap {
position: fixed;
left: 50%;
top: 30%;
width: 600px;
margin-left: -300px;
border: 1px solid #ccc;
background-color: white;
}
#add-wrap #title-wrap {
height: 32px;
line-height: 32px;
padding-left: 30px;
padding-right: 10px;
border-bottom: 1px solid #ccc;
font-weight: bold;
}
#add-wrap #title-wrap button {
float: right;
margin-top: 5px;
}
#add-wrap table {
width: 100%;
}
关键字:
序号 | 商品名称 | 分类 | 价格 | 简介 | *** 作 |
{{index+1}} | {{item.name}} | {{item.category}} | {{item.price}} | {{item.intro}} |
|
{{title}}
名称 | |
分类 | |
价格 | |
简介 |
|
|
new Vue({
el: '#app',
data: {
title: '添加商品',
isSearch: false,
isShow: false,
keyword: '',
editForm: {
id:'',
name: '',
category: '',
price: 0,
intro: ''
},
// list 存放所有商品的数据
list: [{
id: 1499393993,
name: '商品AAAA',
category: '分类一',
price: 10.88,
intro: '简介。。。。'
}, {
id: 1499393994,
name: '商品BBBB',
category: '分类一',
price: 10.88,
intro: '简介。。。。'
}],
searchResultList: []
},
methods: {
// 添加
add() {
this.isShow = true
this.title = '添加商品'
this.editForm.name = ''
this.editForm.price = 0
this.editForm.category = ''
this.editForm.intro = ''
},
// 保存
save() {
if (this.editForm.name.length <= 0) {
alert('请输入名称')
return
}
if (this.editForm.category.length <= 0) {
alert('请输入分类')
return
}
if (this.editForm.price <= 0) {
alert('价格不能小于等于0')
return
}
if (this.title == '添加商品') {
// 添加
this.list.push({
// 当前时间的时间戳作为id
// 单机,id不会重复
id: (new Date()).getTime(),
name: this.editForm.name,
category: this.editForm.category,
price: this.editForm.price,
intro: this.editForm.intro
})
}else{
// 编辑
// 遍历list,找到对应的商品
for(let i=0;i
if(this.list[i].id==this.editForm.id){
this.list[i].name = this.editForm.name
this.list[i].category = this.editForm.category
this.list[i].price = this.editForm.price
this.list[i].intro = this.editForm.intro
}
}
}
this.isShow = false
},
// 删除商品
del(id) {
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].id == id) {
this.list.splice(i, 1)
return
}
}
},
// 编辑
edit(item) {
this.isShow = true
this.title = '编辑商品'
this.editForm.id = item.id
this.editForm.name = item.name
this.editForm.price = item.price
this.editForm.category = item.category
this.editForm.intro = item.intro
}
},
computed:{
// 计算属性
searchResultList2(){
let result = []// 用于放筛选后的数据
for(let i=0;i
if(this.list[i].name.indexOf(this.keyword)>-1){
result.push(this.list[i])
}
}
return result
}
}
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)