vue 嵌套增删改+模态框

最新推荐文章于 2023-11-29 09:11:18 发布

想喝橙汁儿

最新推荐文章于 2023-11-29 09:11:18 发布

阅读量761

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46328144/article/details/108357153

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

在这里插入图片描述
效果如上，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			.modal{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				background-color: rgba(0,0,0,.3);
			}
			.modal-content{
				width: 300px;
				height: 260px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				border-radius: 20px;
				overflow: hidden;
			}
			.modal-head{
				position: relative;
				height: 44PX;
				line-height: 44PX;
				text-align: center;
				background-color: #f0f0f0;
			}
			.modal-head .close{
				position: absolute;
				right: 0;
				top: 0;
				height: 44px;
				line-height: 44px;
				text-align: center;
				width: 44px;
				color: orange;
				cursor: pointer;
			}
			.modal-body{
				padding:10px;
				height: 216px;
				background-color:#FFFFFF ;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>表格修改</h1>
			<table border="1" cellspacing="0" cellpadding="0">
				<tr>
					<th>序号</th>
					<th>标题</th>
					<th>发布人</th>
					<th>发布时间</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index in list" :key="item.title">
					<td>{{index+1}}</td>
					<td>{{item.title}}</td>
					<td>{{item.user}}</td>
					<td>{{item.time}}</td>
					<td>
						<span >删除</span>
						<span @click.prevent="editItem(item,index)">编辑</span>
					</td>
				</tr>
			</table>
			
			
			
			
			<modal :visible="showModal" @update="showModal=$event;">
				<p slot="title">编辑</p>
				<div slot="content">
					<input type="text" v-model="current.title"><br>
					<input type="text" v-model="current.user"><br>
					<input type="date" v-model="current.time"><br>
					<button @click="sureHd()">确定</button><button @click="showModal=false">取消</button>
				</div>
			</modal>
			
			
		</div>
		<script type="text/javascript">
			const modal ={
				props:{"visible":{
					type:Boolean,default:false,
				}},
				template:`<div class="modal" v-if="visible">
				<div class="modal-content">
					<div class="modal-head">
						<slot name="title"></slot>
						<span class="close"  @click="$emit('update',false)">x</span>
					</div>
					
					<div class="modal-body">
						<slot name="content"></slot>
						<br>
						
					</div>
				</div>
			</div>`,
			}
			new Vue({
				el:"#app",
				components:{modal},
				data:{
					current:{},
					editIndex:null,
					showModal:false,
					"list": [{
							"title": "坏蛋是怎样炼成的",
							"user": "想喝橙汁儿",
							"time": "2020-08-01"
						},
						{
							"title": "十八般武艺,样样精通",
							"user": "敲开心",
							"time": "2020-09-01"
						},
					],
					
				},
				methods:{
					editItem(item,index){
						this.editIndex = index;//记录编辑哪行
						this.current = {...item};//解构，把item 解构  赋值给  current
						this.showModal = true;//显示弹出框
					},
					sureHd(){
						this.list[this.editIndex] = {...this.current};
						this.showModal = false;
					}
				}
			})
		</script>
	</body>
</html>