使用vue框架对表格的增删改查

小俞不多余

已于 2022-10-11 13:25:43 修改

阅读量778

点赞数 2

文章标签： vue.js 前端 javascript

于 2022-10-11 09:57:26 首次发布

本文链接：https://blog.csdn.net/mkmmkkghhhhhhhh/article/details/127257626

版权

在页面实现时主要用到了表格table标签，完整代码在最后面，复制使用时记得创建好vue的文件以及文件路径导入

最后的代码段里面有详细的代码注释，不理解的可以留言问我。

运行效果如下：

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第十节</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			th {
				width: 200px;
			}

			#pop {//设置编辑的样式效果
				position: absolute;
				left: 40%;
				top: 200px;
				z-index: 999;
				background-color: rgba(0, 0, 0, .3);
				width: 380px;
				height: 100px;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>商品管理系统</h3>
			<div id="">
				商品名称:<input type="text" v-model="newGoods.name" />
			</div>
			<div id="">
				商品数量:<input type="text" v-model="newGoods.count" />
			</div>
			<div id="">场地：
				<select name="" v-model="newGoods.made">
					<option value="福州">福州</option>
					<option value="龙岩">龙岩</option>
					<option value="泉州">泉州</option>
					<option value="厦门">厦门</option>
				</select>
			</div>
			<div id="">
				<input type="button" value="新增" v-on:click="addGoods" />
			</div>
			<h3>商品信息</h3>
			<div id="">
				<input type="text" v-model="searchStr" />
				<input type="button" value="搜索" v-on:click="resultBooks()" />
				<input type="button" value="升序" v-on:click="sortAscendingGoods()" />
				<input type="button" value="降序" v-on:click="sortDescendingGoods()" />
			</div>
			<table border="1" cellspacing="0" cellpadding="0">
				<tr>
					<th>商品名称:</th>
					<th>数量:</th>
					<th>场地:</th>
					<th>操作:</th>
				</tr>
				<tr v-for="(good,index) in goods">
					<td>{{good.name}}</td>
					<td>{{good.count}}</td>
					<td>{{good.made}}</td>
					<td><input type="button" value="删除" v-on:click="removeGoods(index)" />
						<input type="button" value="修改" v-on:click="shoeGoods(index)" />
					</td>
				</tr>
			</table>
			<div id="pop" v-show="popShow">
				<input type="text" v-model="names" />
				<input type="text" v-model="quantity" />
				<input type="text" v-model="made" />
				<button type="button" @click="getModify(index)">修改</button>
				<button type="button" @click="closeWindow">取消</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				searchStr: null,
				popShow: false,
				names: null,
				quantity: null,
				made: null,
				arr: [],
				goods: [{
						name: '小米电视',
						count: 5,
						made: '福州'
					},
					{
						name: '海尔冰箱',
						count: 3,
						made: '福州'
					},
					{
						name: '格力空调',
						count: 23,
						made: '福州'
					},
					{
						name: '洗衣机',
						count: 15,
						made: '福州'
					}
				],
				newGoods: {
					name: '',
					count: null,
					made: '福州'
				}
			},
			methods: {
				addGoods: function() { //添加商品
					if (this.newGoods.name == '') { //判断名字是否为空
						alert("请输入商品名称");
						return;
					}
					if (this.newGoods.count <= 0) { //判断数量是否为空
						alert("请输入商品数量");
						return;
					}
					this.goods.unshift(this.newGoods); //添加进去
					this.arr = this.goods; //为了解决添加之后搜索完数据不一致
					this.newGoods = { //添加之后三个地方的值变为默认值
						name: '',
						count: null,
						made: '福州'
					};
				},
				removeGoods: function(idx) { //删除方法
					this.goods.splice(idx, 1)
				},
				shoeGoods: function(index) { //修改方法
					this.index = index; //记住当前下标，用于实际修改
					this.popShow = true; //窗口的显示
					this.names = this.goods[index].name; //赋值
					this.quantity = this.goods[index].count;
					this.made = this.goods[index].made;
				},
				resultBooks: function() { //搜索实现
					this.arr = this.goods;
					var serchStr = this.searchStr;
					this.goods = this.goods.filter(function(item) {
						return item.name.match(serchStr);

					})
				},
				closeWindow: function() { //点击取消隐藏窗口
					this.popShow = false;
				},
				getModify: function(index) { //修改实际操作
					this.goods[index].name = this.names
					this.goods[index].count = this.quantity;
					this.goods[index].made = this.made;
					this.popShow = false;
				},
				sortDescendingGoods: function() { //降序
					this.goods.sort(function(a, b) {
						return b.count - a.count;
					});
				},
				sortAscendingGoods: function() { //升序
					this.goods.sort(function(a, b) {
						return a.count - b.count;
					});
				}

			},
			computed: {

			},
			watch: {
				"searchStr": function() { //事件监听，搜索框为空格时返回数组
					if (this.searchStr == '') {
						this.goods = this.arr;
						// console.log(this.a);
					}
				}
			}
		})
	</script>
</html>

希望这篇文章可以帮助到你谢谢