Day05-讲师列表前端-讲师列表显示

{

path: ‘save’,

name: ‘讲师添加’,

component: () => import(‘@/views/tree/index’),

meta: { title: ‘讲师添加’, icon: ‘tree’ }

}

]

},

修改后的前端页面：

原来的前端页面：

第二步：创建路由对应的页面讲师列表页面：list.vue

---

讲师添加页面：save.vue

修改对应路由的地址

第三步：在api文件夹创建teacher.js定义访问的接口地址

---

import request from ‘@/utils/request’

export default {

//1 讲师列表（条件查询分页）

//current当前页 limit每页记录条数 teacherQuery条件对象

getTeacherListPage(current,limit,teacherQuery){

return request({

//url:‘eduservice/teacher/pageTeacherCondition/’+current+“/”+limit,

url:eduservice/teacher/pageTeacherCondition/${current}/${limit},

method:‘post’,

//teacgerQuery条件对象，后端使用RequestBody获取数据

//data表示把对象抓换成json进行传递到接口里面

data:teacherQuery

})

}

}

第四步、在讲师列表页面list.vue页面调用定义的接口方法，得到接口返回数据

---

讲师列表

第五步 把请求接口获取的数据在页面进行显示。使用组件element-ui实现

---

在list.vue插入代码

<el-table

v-loading=“listLoading”

:data=“list”

element-loading-text=“数据加载中”

border

fit

highlight-current-row>

<el-table-column

label=“序号”

width=“70”

align=“center”>

{{ (page - 1) * limit + scope.$index + 1 }}

{{ scope.row.level===1?‘高级讲师’:‘首席讲师’ }}

修改

<el-button type=“danger” size=“mini” icon=“el-icon-delete” @click=“removeDataById(scope.row.id)”>删除