Vue Element 轻松实现学生信息表删除和修改功能

2023-06-04 05:47:35

Vue Element 中实现学生信息表删除和修改功能：打造高效的学生管理系统

简介

在现代教育系统中，学生信息管理至关重要。作为前端开发人员，您可能需要在项目中实现学生信息表的删除和修改功能。本文将指导您利用 Vue Element，一个出色的 JavaScript 框架，轻松实现这些功能。

删除功能

1. 导入库和组件

首先，在 Vue 项目中导入 Vue Element 库及其必需组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 创建表格组件

创建 Vue 组件来显示学生信息表：

<template>
  <el-table :data="tableData" stripe>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="100"></el-table-column>
    <el-table-column prop="gender" label="性别" width="100"></el-table-column>
    <el-table-column prop="address" label="地址" width="200"></el-table-column>
    <el-table-column prop="operation" label="操作" width="120">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="handleDelete(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: '张三',
        age: 20,
        gender: '男',
        address: '北京市海淀区'
      }, {
        name: '李四',
        age: 22,
        gender: '女',
        address: '上海市浦东新区'
      }, {
        name: '王五',
        age: 24,
        gender: '男',
        address: '广州市天河区'
      }]
    }
  },
  methods: {
    handleDelete(index) {
      this.tableData.splice(index, 1);
    }
  }
}
</script>

3. 注册表格组件

在 Vue 实例中注册表格组件：

const app = new Vue({
  el: '#app',
  components: {
    'student-table': StudentTable
  }
});

4. 在 HTML 中使用表格组件

<div id="app">
  <student-table></student-table>
</div>

修改功能

1. 添加修改按钮

在表格组件中，为每一行添加修改按钮：

<el-table-column prop="operation" label="操作" width="120">
  <template slot-scope="scope">
    <el-button type="text" size="small" @click="handleEdit(scope.$index)">修改</el-button>
  </template>
</el-table-column>

2. 添加修改表单

创建修改表单：

<el-dialog title="修改学生信息" :visible.sync="dialogVisible" width="30%">
  <el-form :model="formData" label-width="80px">
    <el-form-item label="姓名">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="formData.age" type="number"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="formData.gender">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="formData.address"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="handleUpdate">确认</el-button>
  </div>
</el-dialog>

3. 实现修改功能

在表格组件中实现修改功能：

export default {
  data() {
    return {
      dialogVisible: false,
      formData: {
        name: '',
        age: 0,
        gender: '男',
        address: ''
      }
    }
  },
  methods: {
    handleEdit(index) {
      this.dialogVisible = true;
      this.formData = Object.assign({}, this.tableData[index]);
    },
    handleUpdate() {
      const index = this.tableData.findIndex(item => item.id === this.formData.id);
      this.tableData[index] = this.formData;
      this.dialogVisible = false;
    }
  }
}