• html部分

<template>
	<div class="about">
        //输入框
		<input type="text" v-model="tit" placeholder="请输入标题">
		<input type="text" v-model="user" placeholder="请输入发布人">
		<input type="date" v-model="times">
		<button class="add" @click="add">新增</button>


        //修改的弹框
		<modal :visible="showModal" @close="showModal=$event">
			<input type="text" v-model="tempRow.tit"><br>
			<input type="text" v-model="tempRow.user"><br>
			<input type="date" v-model="tempRow.times"><br>
			<button @click="showModal=false" class="cancle">取消</button>
			<button @click="sureEdit">确认</button>
		</modal>
        //修改的弹框结束


        //数据
		<table border="1" cellpadding="10" rules="all">
			<tr>
				<th>序号</th>
				<th>标题</th>
				<th>发布人</th>
				<th>发布时间</th>
				<th>操作</th>
			</tr>
			<tr v-for="(item,index) in list" :key="index">
				<td>{{index+1}}</td>
				<td>{{item.tit}}</td>
				<td>{{item.user}}</td>
				<td>{{item.times}}</td>
				<td>
					<a href="" @click.prevent="dele(item)" class="dele">删除</a>
					<a href="" class="edit" @click.prevent="toEdit(item)">编辑</a>
				</td>
			</tr>
		</table>
	</div>
</template>

• js部分

<script>

    //引入弹窗组件
	import modal from '../components/modal.vue'

    //导入
	export default {
		components: {
			modal
		},
		methods: {
			//添加
			add() {
				//判断  如果有其中一个输入为空，则提醒不能输入为空
				if (this.tit != "" && this.user != "" && this.times != "") {
					this.list.push({
						tit: this.tit,
						user: this.user,
						times: this.times
					})
				} else {
					alert("输入不能为空")
				}
				//重新赋值为空
				this.tit = ""
				this.user = ""
				this.times = ""

			},
			//删除
			dele(item) {
				var ind = this.list.indexOf(item)
				this.list.splice(ind, 1)
			},
			//编辑
			toEdit(item) {
				//打开弹窗
				this.showModal = true
				//把item赋值给tempRow
				this.tempRow = {
					...item
				};
				//记录当前是第几行
				this.editIndex = this.list.findIndex(value => value.tit === item.tit)

			},
			//确认编辑
			sureEdit() {
				this.list[this.editIndex] = {
					...this.tempRow
				}
				this.showModal = false
			}

		},
		data() {
			return {
				showModal: false, //弹框默认不显示
				editIndex: null,
				tempRow: {tit: '',user: '',times: ''}, //临时编辑的行
				list: [{
					tit: "今天不上课",
					user: "张三",
					times: '2022-02-24'
				}, {
					tit: "后天放假",
					user: "李四",
					times: '2022-02-12'
				}],
				tit: '',
				user: '',
				times: '',

			}
		}
	}
</script>

• css部分

<style scoped>
	input {
		border: #ccc 1px solid;
		border-radius: 5px;
		margin: 0 5px;
		height: 25px;
		margin-bottom: 15px;
		outline: none;
	}

	input[type="text"] {
		background-color: #fafebc;
	}

	.add {
		background-color: #008cd4;
		border: none;
		color: #fff;
		border-radius: 5px;
		height: 25px;
	}

	table {
		margin: 0 auto;
		width: 790px;
		text-align: left;
	}

	.dele,
	.edit {
		background-color: #fff;
		border: none;
	}

	.dele {
		color: #f00;
	}

	.edit {
		color: #00f;
	}

	.about {
		width: 800px;
		/* height: 500px; */
		border: 1px solid #ccc;
		margin: 0 auto;
		padding: 10px;
	}

	.cancle {
		margin: 0 10px;
	}
</style>

• 创建定义弹窗组件

<template>
	<div class="modal" v-if="visible">
		<div class="modal-con">
			<div class="modal-tit">
				<span>修改</span>
				<span class="close" @click="$emit('close',false)">x</span>
			</div>
			<div class="body">
				<slot></slot>
			</div>
		</div>
	</div>
</template>

• modal组件js

<script>

    //接收父元素数据
	export default{
		props:{
			"visible":{type:Boolean,default:false}
		}
	}
</script>

• modal组件css

<style>
	.modal{
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		position: absolute;
		top: 0;
		left: 0;
	}
	.modal-con{
		width: 300px;
		height: 300px;
		background-color: #fff;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		padding: 20px;
		border-radius: 20px;
	}
	.modal-tit{
		content: "";
		display: block;
		clear: both;
		margin-bottom: 10px;
	}
	.close{
		float: right;
		cursor: pointer;
	}
</style>