vue+element模态框中新增模态框和删除功能

好的，针对你的问题，我进行如下回答：

1. 新增模态框功能实现：

（1）首先，在你的vue组件中，需要定义一个状态变量，用来判断是否显示新增模态框：

// 定义状态变量
data() {
  return {
    showAddModal: false // 是否显示新增模态框
  }
}

（2）在模板中，使用element-ui的el-dialog组件来展示新增模态框：

<template>
  <div>
    <!-- 展示新增按钮 -->
    <el-button @click="showAddModal = true">新增</el-button>
    
    <!-- 定义新增模态框 -->
    <el-dialog
      title="新增数据"
      :visible.sync="showAddModal"
      width="30%">
      
      <!-- 在这里放置新增表单 -->
      
      <!-- 定义确认按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddModal = false">取消</el-button>
        <el-button type="primary" @click="onAdd">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

（3）在onAdd方法中处理新增逻辑，并在成功后关闭新增模态框：

methods: {
  onAdd() {
    // 处理新增逻辑
    // ...
    
    // 关闭新增模态框
    this.showAddModal = false;
  }
}

2. 删除功能实现：

（1）在vue组件中定义一个列表数据：

// 定义状态变量
data() {
  return {
    listData: [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' }
    ]
  }
}

（2）在模板中，使用element-ui的el-table组件来展示列表，并添加删除按钮：

<template>
  <div>
    <!-- 定义数据表格 -->
    <el-table :data="listData">
      <!-- 定义列 -->
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column label="操作">
        <!-- 定义删除按钮 -->
        <template slot-scope="scope">
          <el-button type="danger" @click="onDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

（3）在onDelete方法中处理删除逻辑：

methods: {
  onDelete(index) {
    // 获取待删除数据的id
    const id = this.listData[index].id;
    
    // 处理删除逻辑
    // ...
    
    // 从列表中删除该数据
    this.listData.splice(index, 1);
  }
}

以上是vue+element模态框中新增模态框和删除功能的实现方法，希望对你有所帮助。