elementui 学生列表和老师列表,学生列表添加时添加老师 代码实现
时间: 2023-12-21 14:47:02 浏览: 28
假设你的学生列表和老师列表分别是两个数组 `students` 和 `teachers`,每个学生和老师都是一个包含 `name` 和 `id` 属性的对象。
下面是一个示例代码,实现在学生列表中添加学生时可以选择老师:
```html
<template>
<div>
<el-form :model="form" ref="form">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="老师" prop="teacher">
<el-select v-model="form.teacher" placeholder="请选择老师">
<el-option
v-for="teacher in teachers"
:key="teacher.id"
:label="teacher.name"
:value="teacher.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<el-button type="primary" @click="addStudent">添加学生</el-button>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
teacher: ''
},
teachers: [
{ id: 1, name: '张老师' },
{ id: 2, name: '李老师' },
{ id: 3, name: '王老师' }
]
}
},
methods: {
addStudent() {
this.$refs.form.validate(valid => {
if (valid) {
const student = {
name: this.form.name,
teacher: this.teachers.find(t => t.id === this.form.teacher)
}
this.students.push(student)
this.$message.success('添加成功')
}
})
}
}
}
</script>
```
在上面的代码中,我们使用了 Element UI 的 `el-form` 和 `el-select` 组件来实现表单和选择老师的功能。当用户点击添加学生按钮时,我们首先调用 `this.$refs.form.validate` 方法来验证表单输入是否合法,然后通过 `this.teachers.find` 方法找到选择的老师对象,并将其添加到新的学生对象中,最后将新的学生对象添加到学生列表中。