首先，在Vue.js中，我们可以通过v-model指令来将输入框的值绑定到组件实例中的数据属性上。当用户点击“搜索”按钮时，应该触发load()方法发送请求并返回相应的选课信息列表，并且应该根据当前选课信息总数和每页显示选课信息数量计算出的页数，通过页码切换到指定页面浏览相应的选课信息。 

        其次，在表格中列出选课信息列表，包括课程名称、上课地点、上课时间和学生名字等信息，并为每一条选课信息提供“学生详情”操作按钮。当用户单击某个操作按钮时，应该弹出模态框，并显示当前行所对应选课信息的相关学生详细信息，包括学生姓名、学校、班级、电话号码和选课时间等信息。

        最后，还可以通过重置按钮来清空搜索框中的内容，并重新加载选课信息列表。

代码展示：

<template>
	<div>
		<div style="margin-bottom:20px;">
			<el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入课程名称" v-model="lessonname"></el-input>
			<el-button class="ml-5" type="primary" @click="load">搜索</el-button>
			<el-button type="warning" @click="reset">重置</el-button>
		</div>

		<el-table :data="tableData" border stripe style="font-weight:500;font-size:14px;" >
			<el-table-column prop="lessonname" label="课程名"></el-table-column>
			<el-table-column prop="location" label="上课地点"></el-table-column>
			<el-table-column prop="lessontime" label="上课时间"></el-table-column>
			<el-table-column prop="nickname" label="学生名字"></el-table-column>
	<el-table-column  label="操作">
			<template slot-scope="scope">
				<el-button type="success" @click="handleDetail(scope.row)">学生详情</el-button>
			</template>
	</el-table-column>
	
		</el-table>
	<el-dialog title="学生详情" :visible.sync="dialogFormVisible" width="30%">
    <el-form label-width="70px">
      <div><p>课程名字：{{form.lessonname}}</p></div><br>
      <div><p>上课地点：{{form.location}}</p></div><br>
      <div><p>上课时间：{{form.lessontime}}</p></div><br>
      <div><p>任课老师：{{user.nickname}}</p></div><br>
	  <!-- <div style="border: #3F5EF8 solid 3px;"></div> -->
      <div><p>学生名字：{{form.nickname}}</p></div><br>
      <div><p>学生学校：{{form.school}}</p></div><br>
      <div><p>学生学校班级：{{form.inclass}}</p></div><br>
	     <div><p>学生电话：{{form.phone}}</p></div><br>
		  <div><p>选课时间：{{form.selecttime}}</p></div><br>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" type="primary">确  定</el-button>
        <!-- <el-button type="primary" @click="save">确 定</el-button> -->
    </div>
    </el-dialog>
		<div style="padding: 10px 0">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageNum"
				:page-sizes="[2, 5, 10, 20]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</div>
	</div>
</template>

效果展示：

以上就是本文所介绍的主要功能模块。借助Vue.js和Element UI，我们可以轻松地构建出一个功能完备的选课系统页面，为用户提供便捷的选课服务。