vue2新增删除

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

 <button @click="onAdd">新增</button>
         <el-table
            :header-cell-style="{ textAlign: 'center' }"  
            :cell-style="{ textAlign: 'center' }"
          :data="tableData"
          style="width: 100%">
           <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="序号"
            max-width="100">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            max-width="100">
          </el-table-column>
          <el-table-column
            prop="address"
            max-width="100"
            label="地址">
          </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit( scope.row)">编辑</el-button>
                  <el-button
                    size="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;
            
            // 设置新的 id
            newData.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) {
          // 提交数据到 Vuex
           const 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>