【Vue.js】实现商品添加、列表展示和删除商品
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Management</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./firstCategory.js"></script>
<script src="./specs.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
margin: 10px 50px;
border: 1px solid #333;
}
#app h3 {
padding: 10px 0 10px 0;
font: 16px/1 "微软雅黑";
text-align: center;
}
#app p {
margin: 30px 0 0 70px;
}
#app p label {
display: inline-block;
width: 120px;
text-align: right;
font: 15px/1 "微软雅黑";
}
#app p label i {
color: #f56c6c;
}
#app p select {
width: 320px;
height: 40px;
outline: none;
border: 1px solid #DCDFE6;
border-radius: 4px;
text-indent: 20px;
/* color: #DCDFE6; */
}
#app p select option {
font-size: 16px;
}
#app p input {
width: 800px;
height: 40px;
outline: none;
border: 1px solid #DCDFE6;
border-radius: 4px;
text-indent: 20px;
/* color: #DCDFE6; */
}
button {
display: inline-block;
width: 80px;
height: 40px;
outline: none;
}
.add {
border: 1px solid #409eff;
background-color: #ecf5ff;
border-radius: 5px;
color: #409eff;
cursor: pointer;
margin: 20px 40px 20px 200px;
}
.reset {
border: 1px solid #43C088;
background-color: #ecf5ff;
border-radius: 5px;
color: #43C088;
cursor: pointer;
margin: 20px 40px 20px 40px;
}
.delete {
border: 1px solid #933DA1;
background-color: #BF8EC6;
border-radius: 5px;
color: #933DA1;
cursor: pointer;
}
table {
text-align: center;
}
th,
td {
border: 1px solid #DCDFE6;
}
.img {
display: block;
width: 200px;
height: 160px;
}
.ml140 {
margin-left: 140px;
}
</style>
</head>
<body>
<div id="app">
<h3>添加商品</h3>
<p>
<label><i>* </i>一级分类 </label>
<select name="firstCategory" v-model="goods.firstCategory" @change="onSelectCategory1">
<option :value="0">请选择</option>
<option v-for="item of firstCategory" :key="item.id" :value="item.id">{{item.name}}</option>
</select>
</p>
<p>
<label><i>* </i>二级分类 </label>
<select name="secondCategory" v-model="goods.secondCategory">
<option :value="0">请选择</option>
<option v-for="item of secondCategory" :key="item.id" :value="item.id">{{item.name}}</option>
</select>
</p>
<p>
<label><i>* </i>商品名称 </label>
<input type="text" v-model.trim.lazy="goods.name">
</p>
<p>
<label><i>* </i>价格 </label>
<input type="text" v-model.number.lazy="goods.price">
</p>
<p>
<label><i>* </i>市场价格 </label>
<input type="text" v-model.number.lazy="goods.marketPrice">
</p>
<p>
<label>图片</label>
<input type="text" v-model="goods.img">
<img v-if="goods.img!=''" :src="goods.img" class="img ml140">
</p>
<p>
<label><i>* </i>商品规格 </label>
<select name="specs" v-model="goods.specs" @change="onSelectSpecs1">
<option :value="0">请选择</option>
<option v-for="item of specs" :key="item.id" :value="item.id">{{item.name}}</option>
</select>
</p>
<p>
<label><i>* </i>规格属性 </label>
<select name="attribute" v-model="goods.attribute">
<option :value="0">请选择</option>
<option v-for="item of attribute" :key="item.id" :value="item.id">{{item.name}}</option>
</select>
</p>
<button class="add" @click="addToList">添加商品</button>
<button class="reset" @click="resetList">重置内容</button>
<!-- <p>
一级分类: {{goods.firstCategory}}<br>
二级分类: {{goods.secondCategory}}<br>
商品名称: {{goods.name}}<br>
价格:{{goods.price}}<br>
市场价格:{{goods.marketPrice}}<br>
图片:{{goods.img}}<br>
商品规格:{{goods.specs}}<br>
规格属性:{{goods.attribute}}
</p> -->
<!-- table -->
<table border="0" cellspacing="0">
<tr>
<th width="200" height="100">商品名称</th>
<th width="200" height="100">商品分类</th>
<th width="200" height="100">商品价格</th>
<th width="200" height="100">市场价格</th>
<th width="200" height="100">图片</th>
<th width="200" height="100">是否热卖</th>
<th width="200" height="100">操作</th>
</tr>
<tr v-for="(item, index) of list">
<td width="200" height="160">{{item.name}}</td>
<td width="200" height="160">{{getNameOfFirstCategory(item.firstCategory)}}</td>
<td width="200" height="160">{{item.price}}</td>
<td width="200" height="160">{{item.marketPrice}}</td>
<td width="200" height="160">
<img v-if="item.img!=''" :src="item.img" class="img">
</td>
<td width="200" height="160">是</td>
<td width="200" height="160">
<button @click="onDeleteList(item.id)" class="delete">删除商品</button>
</td>
</tr>
</table>
</div>
<script>
const defaultGoods = { // 商品数据结构
firstCategory: 0,
secondCategory: 0,
name: '',
price: 0,
marketPrice: 0,
img: '',
specs: 0,
attribute: 0
}
new Vue({
el: '#app',
data: {
goods: {...defaultGoods},
list: [], //展示数据
// 一级菜单
firstCategory,
// 二级菜单
secondCategory: [],
// 商品规格
specs,
attribute: []
},
methods: {
onSelectCategory1(event) {
// 获取对应一级商品id
const id = parseInt(event.target.value)
// console.log(id)
// 如果选择了某个一级商品
if (id > 0) {
// 根据id获取一级分类
const category = this.firstCategory.find(item => item.id === id)
// 筛选出二级分类
this.secondCategory = category.children || []
} else {
// 清空二级分类
this.secondCategory = []
}
},
onSelectSpecs1(event) {
const id = parseInt(event.target.value)
if (id > 0) {
const category = this.specs.find(item => item.id === id)
this.attribute = category.children || []
} else {
this.attribute = []
}
},
judgeSubmit() {
if (this.goods.firstCategory != 0 &&
this.goods.secondCategory != 0 &&
this.goods.name != '' &&
this.goods.price != 0 &&
this.goods.marketPrice != 0 &&
this.goods.specs != 0 &&
this.goods.attribute != 0) {
return true
}
alert('请填写完整信息')
return false
},
addToList() {
if (this.judgeSubmit()) {
// data存储数据, 浅拷贝
const data = {...this.goods}
// 添加id
data.id = Date.now()
// 尾部插入
this.list.push(data)
// console.log(this.list)
// 重置表单
this.resetList()
}
},
resetList() {
this.goods = {...defaultGoods}
},
// 根据id获取一级分类的名称
getNameOfFirstCategory(id){
return this.firstCategory.find(item => item.id === id)['name']
},
getNameOfSpecs(id){
return this.specs.find(item => item.id === id)['name']
},
// getNameOfArribute(id){
// return this.attribute.find(item => item.id === id)['name']
// },
onDeleteList(id) {
const index = this.list.findIndex(item => item.id === id)
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
firstCategory.js
var firstCategory = [
{
id: 1,
name: '手机',
children: [
{
id: 11,
name: 'iPhone'
},
{
id: 12,
name: 'XIAOMI'
},
{
id: 13,
name: 'HUWEI'
},
{
id: 14,
name: 'VIVO'
},
{
id: 15,
name: 'OPPO'
}
]
},
{
id: 2,
name: '女包',
children: [
{
id: 21,
name: 'Alexendar'
},
{
id: 22,
name: 'Bvlgari'
},
{
id: 23,
name: 'Gucci'
},
{
id: 24,
name: 'Coach'
},
{
id: 25,
name: 'Diro'
}
]
},
{
id: 3,
name: '羽绒服',
children: [
{
id: 31,
name: 'Canada Goose'
},
{
id: 32,
name: 'North Face'
},
{
id: 33,
name: 'Columbia'
},
{
id: 34,
name: 'Playboy'
},
{
id: 35,
name: 'Snowflying'
}
]
}
]
specs.js
var specs = [
{
id: 4,
name: '颜色',
children: [
{
id: 41,
name: '石墨色'
},
{
id: 42,
name: '银色'
},
{
id: 43,
name: '金色'
},
{
id: 44,
name: '海蓝色'
}
]
},
{
id: 5,
name: '尺寸',
children: [
{
id: 51,
name: 'S'
},
{
id: 52,
name: 'M'
},
{
id: 53,
name: 'XL'
},
{
id: 54,
name: 'XXL'
}
]
},
{
id: 6,
name: '容量',
children: [
{
id: 61,
name: '64GB'
},
{
id: 62,
name: '128GB'
},
{
id: 63,
name: '256GB'
},
{
id: 64,
name: '512GB'
}
]
}
]
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
