vue2新增删除

（只是页面实现，不涉及数据库）
list组件：

 <button @click="onAdd">新增</button><el-table:header-cell-style="{ textAlign: 'center' }"  :cell-style="{ textAlign: 'center' }":data="tableData"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="id"label="序号"max-width="100"></el-table-column><el-table-columnprop="name"label="姓名"max-width="100"></el-table-column><el-table-columnprop="address"max-width="100"label="地址"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit( scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table>// 引入  新增弹框组件<Add  :visible.sync="dialogVisible" :title="title" /><!-- 引入 编辑弹框组件 --><Edit  :visible.sync="dialog"  :title="titleedit" :item="ruleForm"  @save="saveItem" />
js部分：created(){//获取列表数据this.getUser(),// 监听 'formSubmitted' 事件，当表单数据提交时更新列表EventBus.$on('formSubmitted', (newData) => {// 计算当前 tableData 中的最大 id   添加数据时候 id按照顺序自增const maxId = this.tableData.length > 0 ? Math.max(...this.tableData.map(item => item.id)) : 0;// 设置新的 idnewData.id = maxId + 1;this.tableData.push(newData); // 添加新数据到 dataList});},methods：{// 点击新增按钮onAdd(){this.dialogVisible=true;},//  删除handleDelete( row ) {console.log(row)this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(() => {// 通过 row 数据找到索引并删除const itemIndex = this.tableData.findIndex(item => item.id === row.id);console.log(itemIndex)if (itemIndex !== -1) {this.tableData.splice(itemIndex, 1);}this.reassignIds()this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},// 重新分配数据的id  保证其自增reassignIds(){this.tableData.forEach((item,index)=>{item.id=index+1})}
}// 编辑
handleEdit(row){console.log(row,'row')this.dialog=true;this.titleedit="编辑"this.ruleForm={...row}  // // 复制项的数据到 列表中
},// 保存编辑后的项saveItem(updatedItem) {console.log(updatedItem,'updatedItem')// 更新列表中的数据，通常会同步到后端const index = this.tableData.findIndex(item => item.id === updatedItem.id);if (index !== -1) {this.$set(this.tableData, index, { ...updatedItem }); // 使用 Vue.set 来确保响应式更新数据列表console.log(this.tableData,'this.tableData[index]')}}

Add组件：

        <el-dialog:title="title":visible.sync="visible"width="30%"center><el-form :model="ruleForm"  :rules="rules"  ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="序号" prop="id"><el-input type="text" v-model="ruleForm.id" ></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input type="text" v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="地址" prop="address"><el-input v-model.number="ruleForm.address"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></el-dialog>js部分：import {EventBus} from '../util/eventBus'；export default {data() {return {ruleForm:{// id:'',name:'',address:''},rules: {// id: [//   { required: true, message: '序号不能为空', trigger: 'blur' }// ],name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],address: [{ required: true, message: '地址不能为空', trigger: 'blur' }]}}},props:{visible:{typeof:Boolean,default:false},title:{typeof:String,default:''}},watch:{visible(newVal){this.$emit('update:visible', newVal);}},methods:{closeDialog(){this.$emit('update:visible', false); },
// 提交
// 提交表单submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {// 提交数据到 Vuexconst formCopy = { ...this.ruleForm }; // 创建 ruleForm 的副本EventBus.$emit('formSubmitted', formCopy);this.$message.success('提交成功');this.ruleForm.name=''this.ruleForm.address=''this.closeDialog();} else {// this.$message.error('表单验证失败');}});},// 重置resetForm(formName) {this.$refs[formName].resetFields();}}};
</script>

event-bus.js中：// event-bus.js
import Vue from 'vue';
// 创建一个空的 Vue 实例作为事件总线
export const EventBus = new Vue();

// 编辑弹框
<template><div><el-dialog:title="title":visible.sync="visible"width="30%"center><el-form :model="ruleForm"  :rules="rules"  ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="姓名" prop="name"><el-input type="text" v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="地址" prop="address"><el-input v-model.number="ruleForm.address"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></el-dialog></div>
</template><script>
import {EventBus} from '../util/eventBus'export default {data() {return {ruleForm:{name:'',address:''},rules: {name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],address: [{ required: true, message: '地址不能为空', trigger: 'blur' }]}}},props:{visible:{typeof:Boolean,default:false},title:{typeof:String,default:''},item:{typeof:Object,default:()=>({})}},watch:{visible(newVal){this.$emit('update:visible', newVal);},item(newItem){this.ruleForm={...newItem}}},methods:{closeDialog(){this.$emit('update:visible', false); },// 重置resetForm(formName) {console.log(formName,'formName')this.$refs[formName].resetFields();this.ruleForm.name='',this.ruleForm.address=''},//  提交submitForm(){this.$emit('save',this.ruleForm)this.closeDialog()}}};
</script>