template div div style=margin-bottom20px; el-input style=width 200px suffix-icon=el-icon-search placeholder=请输入课程名称 v-model=lessonname e

本代码为一个选课系统的前端代码，使用了Element UI框架进行开发。

整体结构分为三个部分：

1.搜索栏：包含了一个输入框和两个按钮，分别用于搜索和重置操作。

2.课程列表：包含了一个表格，显示了所有的课程信息，其中包含了课程名、上课地点、上课时间和操作四列。

3.分页器：用于控制表格的分页操作，包含了当前页数、每页显示数量、总数量和页面跳转等操作。

具体实现细节如下：

1.搜索栏：

在搜索栏中，我们使用了Element UI的Input和Button组件，其中Input组件用于输入搜索关键词，Button组件则分别对应了“搜索”和“重置”操作。

在搜索操作中，我们通过调用load()方法，向后台发送请求获取符合条件的课程信息，并将其渲染到表格中。

在重置操作中，我们通过将搜索关键词置为空，并调用load()方法，重新加载所有的课程信息。

2.课程列表：

在课程列表中，我们使用了Element UI的Table和TableColumn组件，分别用于渲染表格和表头信息。

在表格中，我们通过v-for指令和tableData数组，将所有的课程信息渲染到表格中。

在操作列中，我们使用了Element UI的Button组件，其中handleDetail()方法用于展示当前课程的详情信息。

3.分页器：

在分页器中，我们使用了Element UI的Pagination组件，用于控制表格的分页操作。

在分页器的事件中，我们通过handleSizeChange()和handleCurrentChange()方法，分别处理了每页显示数量和当前页数的改变。

完整代码如下