vue2+elementUI完成添加学生删除学生案列

以下是一个使用Vue 2和Element UI创建的简单的添加和删除学生信息的示例代码：

<template>
  <div id="app">
    <el-button @click="addStudent">添加学生</el-button>
    <el-table :data="students" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="deleteStudent(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      students: [
        // 初始学生数据
        { name: '张三', age: 18 },
        { name: '李四', age: 20 }
      ]
    }
  },
  methods: {
    addStudent() {
      // 添加学生逻辑
      let name = `学生_${this.students.length + 1}`;
      let age = 18; // 假设新学生的年龄默认为18岁
      this.students.push({ name, age });
    },
    deleteStudent(index) {
      // 删除学生逻辑
      this.students.splice(index, 1);
    }
  }
}
</script>

在这个示例中，我们定义了一个Vue组件，其中包含一个添加学生和删除学生的功能。添加学生按钮会向学生列表中添加一个新的学生记录，删除学生按钮则会从表格和数据中删除对应的学生记录。这个示例展示了如何使用Element UI的表格组件和按钮组件来创建一个简单的用户界面，并使用Vue的响应式数据绑定来更新UI。