vue 嵌套增删改+模态框

水深无声 2022-12-03 08:37 73阅读 0赞

![在这里插入图片描述][20200902102145218.gif_pic_center]  
效果如上，代码如下：

<!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>

[20200902102145218.gif_pic_center]: /images/20221123/8fbcd8c3693a4a469a82e25630cc2284.png