vue3 实现数据增删改

• 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赋值给tempRowthis.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>