13.3.2 ?授课教师的选择
（1）将 teacher\index.vue 导入 student\index.vue 作为子组件使用
（2）使用 dialog 对话框组件，包裹 Teacher 组件
（3）在 student\index.vue 组件的 data 选项中定义 dialogTeacherVisible 控制对话框
（4）修改 授课教师 输入框 readonly 只读框 @click.native 点击事件。
（5）教师页面在弹出时候很多是我们不需要的, 进行优化, 父组件向子组件传递数据：通过 props 声明接收 向教师 Teacher 子组件传入一个参数 isDialog , 如果是弹出窗口, 则弹出页面隐藏一些功能. 在 student\index.vue 上的 <teacher> 组件标签上绑定属性 :isDialog="true"
在 teacher\index.vue 中通过 props 选项 声明接收 isDialog
搜索只要 教师姓名 ；列表只要 序号、工号，教师姓名、手机号； 分页只要 向前、向后和页码 采用 v-if=“!isDialog” 来隐藏 搜索隐藏：
列表隐藏:
分页修改：
（6）当点击列表中某一行教师，即选中；选中的那个教师数据传回到父组件 学员管理 中 。
在 teacher\index.vue 组件的 el-table 表格组件上配置 highlight-current-row 属性可实现单选； 通过 current-change 事件管理选中时触发的事件函数 clickCurrentChange，并传入 currentRow ， oldCurrentRow 参数 注意: 是 clickCurrentChange 函数, 不能取 handleCurrentChange 函数名,因为在分页查询有定义这个函 数名
（7）在 teacher\index.vue 组件定义 clickCurrentChange 函数，向父组件传递点击数据。 子组件向父组件传递数据：通过 $emit 触发事件的方式
（8）在父组件 student\index.vue 的组件元素 teacher上绑定自定义事件 option-teacher
（9）在父组件 student\index.vue 中添加 option-teacherr 事件触发的函数 optionTeacher 进行回显数据
13.3.3? 重置功能
在 条件查询区域添加 一个 重置 按钮, 直接在上面调用重置方法, 注意 'searchForm'
如果条件输入框有时输入不了内容, 和授课教师无法重置, 在 search 对象中明确属性名
如果还不行， 检查下在 el-form-item 标签属性 prop 上, 有没指定指定了字段名, 重置才会生效
14? 学员管理-新增
14.1? 需求分析
（1）点击 新增 按钮后，对话框形式弹出新增窗口
（2）输入学员信息后，点击 确定 提交表单数据
14.2? 新增窗口实现
（1）在 src\views\student\index.vue 中分页区域的下方，新增对话框形式表单数据模板
（2）data 选项中声明变量属性: pojo 提交表单对象 dialogFormVisible 当它为 true 弹出，false 不弹。 rules : 定义校验规则
（3）在 methods 中添加 addData() 函数,提交表单数据用的
（4）在 template 中的查询按钮旁边添加一个 新增 按钮，用于打开新增会员对话框
（5）在 methods 中添加 handleAdd() 函数, 打开新增对话框 关闭窗口后，再次打开窗口，会发现表单里依然有数据，应当清除数据。
（6）测试发现，点击选择教师，数据没有回显，实际上是回显到搜索框(search)了， 解决：定义一个中间变量 isEdit: false, 打开时赋值 true, 然后在回显处，判断回显 search还是 pojo 修改编辑窗口的教师名称输入框绑定一个处理函数 editOptionSupplier
data 中声明一个 isEdit: false ， 在 methods 中定义函数 editOptionSupplier ， 修改 optionTeacher 函数作判断赋值。
14.3? 表单数据提交
14.3.1? nodejs添加新增学员接口
14.3.2? Api调用接口
（1）src\api\student.js 导出的默认对象中，添加调用新增接口的方法
（2）在 src\views\student\index.vue 中的 addData 方法中提交数据，代码如下：
15? 学员管理-修改
15.1? 需求分析
当点击 编辑 按钮后，弹出编辑商品窗口，并查询出信息渲染。修改后点击确定提交修改数据。
15.2? nodejs添加接口
15.2.2? 提交修改数据接口
15.3? Api调用接口
（1）src\api\student.js 导出的默认对象中，添加ID查询方法 getById 和 更新方法 update
（2）在 src\views\student\index.vue 中的 handleEdit 方法做如下修改：
（3）修改对话框中的确认按钮点击事件， pojo.id === undefined 值为true是新增，有id说明是更新。
（4）提交更新数据
16? 学员管理-删除
16.1? 需求分析
当点击删除按钮后, 弹出提示框，点击确定后，执行删除并刷新列表数据
16.2? EasyMock添加模拟接口
16.3? Api调用接口
（1）src\api\student.js 导出的默认对象中，添加 deleteById 方法
（2）在 src\views\student\index.vue 中的 handleDele 方法做如下修改：
?心得：已经可以很熟练的掌握增删改查四种操作、与教师管理系统基本相符，只是学生管理系统有选择教师的操作，所以比较复杂一点，今日体会是要注意前后台数据的统一性，切勿混淆教师与学员之间重合的要素，在进行父子组件之间的连接时，应注意分清哪部分写在父组件中，哪部分写在子组件中，在不报错但是也不实现应有的功能时，可以看看后台，利用控制台输出来判断数据是否传送到前台。