查询课表详情

        点击“详情”按钮则调用 handleDetail 方法展示课程详情弹出框，handleDetail 方法接收一个课程对象作为参数，并将该课程信息绑定到弹出框的表单中。

        首先定义一个表单对象和一个弹出框显示状态变量，并将它们初始化为空值或 false。

• data() {
      return {
          ...
          dialogFormVisible: false, // 控制弹出框的显示与隐藏
          form: {                   // 用于绑定表单数据
              name: '',
              teacher: '',
              start_time: '',
              end_time: '',
              location: '',
              description: ''
          },
          ...
      };
  },
  

• 在 handleDetail 方法中，接收一个课程对象作为参数，并将该对象中的属性值赋给表单对象。同时，将弹出框显示状态设置为 true，以显示弹出框。

• handleDetail(row) {
      this.form = Object.assign({}, row); // 将 row 中的属性值赋给 this.form
      this.dialogFormVisible = true;      // 显示弹出框
  }
  

• 在弹出框中，使用 el-form 组件展示表单内容，通过 v-model 实现表单数据双向绑定。使用 el-dialog 组件包裹表单，并通过 v-if 属性控制弹出框的显示和隐藏。

1. <el-dialog title="课程详情" :visible.sync="dialogFormVisible">
       <el-form :model="form" label-width="100px">
           <el-form-item label="课程名称">
               <el-input v-model="form.name"></el-input>
           </el-form-item>
           <el-form-item label="教师">
               <el-input v-model="form.teacher"></el-input>
           </el-form-item>
           <el-form-item label="开始时间">
               <el-input v-model="form.start_time"></el-input>
           </el-form-item>
           <el-form-item label="结束时间">
               <el-input v-model="form.end_time"></el-input>
           </el-form-item>
           <el-form-item label="地点">
               <el-input v-model="form.location"></el-input>
           </el-form-item>
           <el-form-item label="课程描述">
               <el-input type="textarea" :rows="3" v-model="form.description"></el-input>
           </el-form-item>
       </el-form>
   </el-dialog>
   

        需要注意的是，在弹出框中显示的课程详情数据应该是从后端 API 中获取的，而不是直接使用前端传递过来的数据。在调用 handleDetail 方法时，需要将要显示的课程对象作为参数进行传递。

效果展示：