谷粒学苑第二章前端框架-2.3前端框架之条件查询并分页展示

 一、讲师管理列表展示的步骤

第一步：添加路由,UI定向到views/edu/teacher/list页面

export const constantRouterMap = [
	//前后都省略
  {
    path: '/edu/teacher',
    component: Layout,
    redirect: '/edu/teacher/list',
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '讲师列表',
        component: () => import('@/views/edu/teacher/list'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '讲师添加',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '讲师添加', icon: 'tree' }
      }
    ]
  },

]

 第二步：在views目录下创建文件夹edu/teacher/并创建list.vue页面。

        页面结构如下

第三步：定义api，调用后端接口。

创建文件src/api/edu/teacher.js

export default{
    getTeacherListPage(current,limit,teacherQuery) {
        return request({
          //`符号特殊字符，在``中可以使用${}引用变量
          url: `/eduservice/teacher/pageQuery/${current}/${limit}`,
          method: 'post',
          //data表示把对象转换成json,以json格式传递到接口中。后端使用RequestBody获取数据
          data: teacherQuery
        })
      }
}

二、vue页面知识讲解

 2.1 条件查询并分页展示的页面Vue代码

2.2 el-form 表单

        表单中封装了查询条件，用于传给后台接口。teacherCondition是在data中定义的对象，而name，level都是和后台接口接收类对应的属性名，两者要保持相同。

•  表单:把所有的查询条件放在一个表单中，inline属性表示所有表单项在同一行中展示。
• 表单项。
• 输入框
• 选择框，:value代表传给后台的主键，label表示展示的值。
• :时间选择框

2.3 el-table表格用来渲染数据

•   list表示存储的从后台接收到的用来展示的数据。
• 当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
• 中的