bestvike 练习4 --vue2.0+elementui实现教师管理系统

以下是一个简化的Vue 2.0和Element UI的教师管理系统的核心代码示例。请注意，这里没有包含所有的组件和逻辑，只是展示了如何定义一个基本的教师列表和添加新教师的功能。

<template>
  <el-table :data="teachers" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="dialogVisible = true">添加教师</el-button>
  <el-dialog title="添加教师" :visible.sync="dialogVisible">
    <el-form :model="newTeacher">
      <el-form-item label="姓名">
        <el-input v-model="newTeacher.name"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addTeacher">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      teachers: [
        // 初始教师数据
        { id: 1, name: '张老师' },
        { id: 2, name: '王老师' }
      ],
      newTeacher: {
        name: ''
      },
      dialogVisible: false
    };
  },
  methods: {
    addTeacher() {
      const newTeacher = { ...this.newTeacher, id: this.teachers.length + 1 };
      this.teachers.push(newTeacher);
      this.dialogVisible = false;
      this.newTeacher = { name: '' };
    },
    handleEdit(index, row) {
      // 编辑操作
    },
    handleDelete(index, row) {
      // 删除操作
    }
  }
};
</script>

这段代码展示了如何使用Element UI的表格（<el-table>）和对话框（<el-dialog>）组件来构建用户界面，并通过Vue的数据绑定和事件处理来实现教师的列表展示、添加和编辑功能。这个示例简单且直接，适合作为学习Vue和Element UI的起点。