5.后台管理-讲师管理-前端实现
5.1 查询所有
5.1.1 需求
5.1.2 表格渲染
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table</span> <span style="color:#0000cc">v-loading</span>=<span style="color:#aa1111">"listLoading"</span> <span style="color:#0000cc">:data</span>=<span style="color:#aa1111">"teacherList"</span> <span style="color:#0000cc">border</span> <span style="color:#0000cc">fit</span> <span style="color:#0000cc">highlight-current-row</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"width: 100%;"</span> <span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"ID"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"id"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.id }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"姓名"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"name"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80"</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"头衔"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"id"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"120"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.level == 1 ? '高级讲师' : '首席讲师' }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"资历"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"intro"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"350"</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"添加时间"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"150px"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span> <span style="color:#555555">{{row.gmtCreate}}</span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}') }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"排序"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"sort"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80px"</span> <span style="color:#0000cc">min-width</span>=<span style="color:#aa1111">"50px"</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"状态"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"100px"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.isDeleted == 1 ? '已删除' : '未删除' }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"操作"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"230"</span> <span style="color:#0000cc">class-name</span>=<span style="color:#aa1111">"small-padding fixed-width"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row,$index}"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"primary"</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"mini"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"updateTeacher(row)"</span><span style="color:#117700">></span> 修改 <span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">v-if</span>=<span style="color:#aa1111">"row.status!='deleted'"</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"mini"</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"danger"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"deleteTeacher(row,$index)"</span><span style="color:#117700">></span> 删除 <span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table</span><span style="color:#117700">></span> {{teacherList}} <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span> <span style="color:#aa5500">// 导入接口文件，并解构指定的方法</span> <span style="color:#770088">import</span> { <span style="color:#0000ff">findAll</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/api/teacher'</span> <span style="color:#770088">import</span> { <span style="color:#0000ff">parseTime</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/utils'</span> <span style="color:#770088">export</span> <span style="color:#770088">default</span> { <span style="color:#000000">data</span>() { <span style="color:#770088">return</span> { <span style="color:#000000">listLoading</span>: <span style="color:#221199">true</span>, <span style="color:#000000">teacherList</span>: [] } }, <span style="color:#000000">methods</span>: { <span style="color:#000000">async</span> <span style="color:#000000">findAllTeacher</span>() { <span style="color:#770088">this</span>.<span style="color:#000000">listLoading</span> <span style="color:#981a1a">=</span> <span style="color:#221199">true</span> <span style="color:#aa5500">// 调用接口文件中接口到的方法</span> <span style="color:#770088">let</span> { <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">findAll</span>() <span style="color:#770088">this</span>.<span style="color:#000000">teacherList</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">data</span> <span style="color:#aa5500">// 恢复状态</span> <span style="color:#770088">this</span>.<span style="color:#000000">listLoading</span> <span style="color:#981a1a">=</span> <span style="color:#221199">false</span> }, <span style="color:#000000">updateTeacher</span>() { }, <span style="color:#000000">deleteTeacher</span>() { } }, <span style="color:#000000">mounted</span>() { <span style="color:#aa5500">// 页面加载成功，查询所有老师</span> <span style="color:#770088">this</span>.<span style="color:#000000">findAllTeacher</span>() }, } <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span> </span></span>
5.2分页列表
5.2.1定义api
- 在
src/api/teacher.js中添加
<span style="background-color:#f8f8f8"><span style="color:#333333">/* 条件查询 @param teacherPage 分页对象 @param teacherVo 条件对象 */ export function condition(teacherPage,teacherVo) { return axios.post(`/teacher-service/teacher/condition/${teacherPage.size}/${teacherPage.current}`, teacherVo) } </span></span>
5.2.2 分页实现
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table</span> <span style="color:#0000cc">v-loading</span>=<span style="color:#aa1111">"listLoading"</span> <span style="color:#0000cc">:data</span>=<span style="color:#aa1111">"teacherPage.records"</span> <span style="color:#0000cc">border</span> <span style="color:#0000cc">fit</span> <span style="color:#0000cc">highlight-current-row</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"width: 100%;"</span> <span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"ID"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"id"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.id }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"姓名"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"name"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80"</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"头衔"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"id"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"120"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.level == 1 ? '高级讲师' : '首席讲师' }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"资历"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"intro"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"350"</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"添加时间"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"150px"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span> <span style="color:#555555">{{row.gmtCreate}}</span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}') }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"排序"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"sort"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80px"</span> <span style="color:#0000cc">min-width</span>=<span style="color:#aa1111">"50px"</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"状态"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"100px"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.isDeleted == 1 ? '已删除' : '未删除' }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"操作"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"230"</span> <span style="color:#0000cc">class-name</span>=<span style="color:#aa1111">"small-padding fixed-width"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row,$index}"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"primary"</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"mini"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"updateTeacherPre(row)"</span><span style="color:#117700">></span> 修改 <span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">v-if</span>=<span style="color:#aa1111">"row.status!='deleted'"</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"mini"</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"danger"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"deleteTeacher(row,$index)"</span><span style="color:#117700">></span> 删除 <span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table</span><span style="color:#117700">></span> <span style="color:#aa5500"><!-- 分页条 --></span> <span style="color:#117700"><</span><span style="color:#117700">pagination</span> <span style="color:#0000cc">v-show</span>=<span style="color:#aa1111">"teacherPage.total>0"</span> <span style="color:#0000cc">:total</span>=<span style="color:#aa1111">"teacherPage.total"</span> <span style="color:#0000cc">:pageSizes</span>=<span style="color:#aa1111">"[1,2,3,5]"</span> <span style="color:#0000cc">:page.sync</span>=<span style="color:#aa1111">"teacherPage.current"</span> <span style="color:#0000cc">:limit.sync</span>=<span style="color:#aa1111">"teacherPage.size"</span> <span style="color:#0000cc">@pagination</span>=<span style="color:#aa1111">"conditionTeacher"</span> <span style="color:#117700">/></span> <span style="color:#aa5500"><!-- --></span> <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span> <span style="color:#aa5500">// 导入接口文件，并解构指定的方法</span> <span style="color:#770088">import</span> { <span style="color:#0000ff">findAll</span>,<span style="color:#0000ff">condition</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/api/teacher'</span> <span style="color:#770088">import</span> { <span style="color:#0000ff">parseTime</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/utils'</span> <span style="color:#770088">import</span> <span style="color:#0000ff">Pagination</span> <span style="color:#770088">from</span> <span style="color:#aa1111">'@/components/Pagination'</span> <span style="color:#aa5500">// secondary package based on el-pagination</span> <span style="color:#770088">export</span> <span style="color:#770088">default</span> { <span style="color:#000000">components</span>: { <span style="color:#000000">Pagination</span> }, <span style="color:#000000">data</span>() { <span style="color:#770088">return</span> { <span style="color:#000000">listLoading</span>: <span style="color:#221199">true</span>, <span style="color:#000000">teacherPage</span>: { <span style="color:#aa5500">// 分页数据</span> <span style="color:#000000">current</span>: <span style="color:#116644">1</span>, <span style="color:#000000">size</span>: <span style="color:#116644">3</span>, <span style="color:#000000">total</span>: <span style="color:#116644">0</span> }, <span style="color:#000000">teacherVo</span>: { <span style="color:#aa5500">// 查询条件</span> } } }, <span style="color:#000000">methods</span>: { <span style="color:#aa5500">/*</span> <span style="color:#aa5500"> async findAllTeacher() {</span> <span style="color:#aa5500"> this.listLoading = true</span> <span style="color:#aa5500"> // 调用接口文件中接口到的方法</span> <span style="color:#aa5500"> let { data } = await findAll()</span> <span style="color:#aa5500"> this.teacherList = data</span> <span style="color:#aa5500"> // 恢复状态</span> <span style="color:#aa5500"> this.listLoading = false</span> <span style="color:#aa5500"> },</span> <span style="color:#aa5500"> */</span> <span style="color:#000000">async</span> <span style="color:#000000">conditionTeacher</span>() { <span style="color:#770088">this</span>.<span style="color:#000000">listLoading</span> <span style="color:#981a1a">=</span> <span style="color:#221199">true</span> <span style="color:#aa5500">// 调用接口文件中接口到的方法</span> <span style="color:#770088">let</span> { <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">condition</span>(<span style="color:#770088">this</span>.<span style="color:#000000">teacherPage</span>,<span style="color:#770088">this</span>.<span style="color:#000000">teacherVo</span>) <span style="color:#770088">this</span>.<span style="color:#000000">teacherPage</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">data</span> <span style="color:#aa5500">// 恢复状态</span> <span style="color:#770088">this</span>.<span style="color:#000000">listLoading</span> <span style="color:#981a1a">=</span> <span style="color:#221199">false</span> }, <span style="color:#000000">updateTeacherPre</span>() { }, <span style="color:#000000">deleteTeacher</span>() { } }, <span style="color:#000000">mounted</span>() { <span style="color:#aa5500">// 页面加载成功，查询所有老师</span> <span style="color:#aa5500">// this.findAllTeacher()</span> <span style="color:#770088">this</span>.<span style="color:#000000">conditionTeacher</span>() }, } <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span> </span></span>
5.2.3 条件
<span style="background-color:#f8f8f8"><span style="color:#333333"><!-- 分页 --> <el-pagination :current-page="page" :page-size="limit" :total="total" style="padding: 30px 0; text-align: center;" layout="total, prev, pager, next, jumper" @current-change="fetchData" /></span></span>
5.2.4 条件表单
通过 value-format="yyyy-MM-dd" 设置日期组件数据格式
<span style="background-color:#f8f8f8"><span style="color:#333333"><!-- 查询条件 --> <div class="filter-container"> <el-form ref="conditionForm" :inline="true" :model="teacherVo" class="demo-form-inline"> <el-form-item > <el-input v-model="teacherVo.name" placeholder="讲师名" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" /> <el-select v-model="teacherVo.level" placeholder="讲师头衔" clearable style="width: 150px" class="filter-item"> <el-option label="高级讲师" :value="1" /> <el-option label="首席讲师" :value="2" /> </el-select> </el-form-item> <el-form-item label="活动时间"> <el-col :span="12"> <el-date-picker type="date" placeholder="查询开始时间" v-model="teacherVo.beginDate" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker> </el-col> <el-col :span="12"> <el-date-picker placeholder="查询结束时间" v-model="teacherVo.endDate" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker> </el-col> </el-form-item> <el-form-item > <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="conditionTeacher"> 搜索 </el-button> <el-button class="filter-item" style="margin-left: 10px;" @click="clearCondition"> 清空 </el-button> </el-form-item> </el-form> </div></span></span>
清空函数
<span style="background-color:#f8f8f8"> clearCondition() { this.teacherVo = {} }</span>
5.2.5 测试
ok
5.3 新增
5.3.1 定义api
- src/api/edu/teacher.js （已有）
<span style="background-color:#f8f8f8"><span style="color:#333333">// 添加教师 export function save(teacher) { return axios.post('/teacher-service/teacher', teacher) }</span></span>
5.3.2 显示添加页面
- 编写路由 （已有）
<span style="background-color:#f8f8f8"> { <span style="color:#000000">path</span>: <span style="color:#aa1111">'add'</span>, <span style="color:#000000">component</span>: () <span style="color:#981a1a">=></span> <span style="color:#770088">import</span>(<span style="color:#aa1111">'@/views/edu/teacher/add'</span>), <span style="color:#000000">name</span>: <span style="color:#aa1111">'添加教师'</span>, <span style="color:#000000">meta</span>: { <span style="color:#000000">title</span>: <span style="color:#aa1111">'添加教师'</span>, <span style="color:#000000">icon</span>: <span style="color:#aa1111">'edit'</span> } <span style="color:#aa5500">//二级菜单名称</span> }</span>
- src/views/edu/teacher/add.vue
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"app-container"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form</span> <span style="color:#0000cc">label-width</span>=<span style="color:#aa1111">"120px"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师名称"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.name"</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师排序"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-input-number</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.sort"</span> <span style="color:#0000cc">controls-position</span>=<span style="color:#aa1111">"right"</span> <span style="color:#0000cc">:min</span>=<span style="color:#aa1111">"0"</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师头衔"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-select</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.level"</span> <span style="color:#0000cc">clearable</span> <span style="color:#0000cc">placeholder</span>=<span style="color:#aa1111">"请选择"</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--</span> <span style="color:#aa5500">数据类型一定要和取出的json中的一致，否则没法回填</span> <span style="color:#aa5500">因此，这里value使用动态绑定的值，保证其数据类型是number</span> <span style="color:#aa5500">--></span> <span style="color:#117700"><</span><span style="color:#117700">el-option</span> <span style="color:#0000cc">:value</span>=<span style="color:#aa1111">"1"</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"高级讲师"</span><span style="color:#117700">/></span> <span style="color:#117700"><</span><span style="color:#117700">el-option</span> <span style="color:#0000cc">:value</span>=<span style="color:#aa1111">"2"</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"首席讲师"</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">el-select</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师资历"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.career"</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师简介"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.intro"</span> <span style="color:#0000cc">:rows</span>=<span style="color:#aa1111">"10"</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"textarea"</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#aa5500"><!-- 讲师头像：TODO --></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"primary"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"saveTeacher"</span><span style="color:#117700">></span>保存<span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-form</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span> <span style="color:#770088">export</span> <span style="color:#770088">default</span> { <span style="color:#000000">data</span>() { <span style="color:#770088">return</span> { <span style="color:#000000">teacher</span>: { } } }, <span style="color:#000000">methods</span>: { <span style="color:#000000">saveTeacher</span>() { } }, } <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span> </span></span>
5.3.3 实现新增功能
- 导入 api，并修改 saveTeacher 发送ajax
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span> <span style="color:#aa5500">// 导入ajax方法</span> <span style="color:#770088">import</span> { <span style="color:#0000ff">save</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/api/teacher'</span> <span style="color:#770088">export</span> <span style="color:#770088">default</span> { <span style="color:#000000">data</span>() { <span style="color:#770088">return</span> { <span style="color:#000000">teacher</span>: { } } }, <span style="color:#000000">methods</span>: { <span style="color:#000000">async</span> <span style="color:#000000">saveTeacher</span>() { <span style="color:#aa5500">// ajax 查询，返回结果为BaseResult</span> <span style="color:#770088">let</span> { <span style="color:#0000ff">message</span> , <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">save</span>( <span style="color:#770088">this</span>.<span style="color:#000000">teacher</span> ) <span style="color:#aa5500">// 成功提示</span> <span style="color:#770088">this</span>.<span style="color:#000000">$message</span>.<span style="color:#000000">success</span>( <span style="color:#0055aa">message</span> ) <span style="color:#aa5500">// 关闭当前选项卡,【注意：必须放在跳转之前】</span> <span style="color:#770088">this</span>.<span style="color:#000000">$store</span>.<span style="color:#000000">dispatch</span>(<span style="color:#aa1111">'tagsView/delView'</span>, <span style="color:#770088">this</span>.<span style="color:#000000">$route</span>) <span style="color:#aa5500">// 跳转到列表页面</span> <span style="color:#770088">this</span>.<span style="color:#000000">$router</span>.<span style="color:#000000">push</span>(<span style="color:#aa1111">'/teacher/list'</span>) } }, <span style="color:#000000">mounted</span>() { <span style="color:#000000">console</span>.<span style="color:#000000">info</span>(<span style="color:#770088">this</span>.<span style="color:#000000">$refs</span>) }, } <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span></span></span>
5.3.4 扩展：关闭选项卡分析
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 关闭当前选项卡,【注意：必须放在跳转之前】</span> <span style="color:#770088">this</span>.<span style="color:#000000">$store</span>.<span style="color:#000000">dispatch</span>(<span style="color:#aa1111">'tagsView/delView'</span>, <span style="color:#770088">this</span>.<span style="color:#000000">$route</span>)</span></span>
分析：
<span style="background-color:#f8f8f8"><span style="color:#aa5500">//操作vuex的标准写法</span> <span style="color:#770088">this</span>.<span style="color:#000000">$store</span> <span style="color:#aa5500">//执行vuex的action的标准写法</span> <span style="color:#770088">this</span>.<span style="color:#000000">$store</span>.<span style="color:#000000">dispatch</span> <span style="color:#aa5500">// 执行模块“tagsView”中，名称为“delView”的action</span> <span style="color:#000000">tagsView</span><span style="color:#981a1a">/</span><span style="color:#000000">delView</span> <span style="color:#aa5500">// 参数为当前路由</span> <span style="color:#770088">this</span>.<span style="color:#000000">$route</span></span>
- vuex的位置
- 模块文件的位置
- action的位置
代码出处
5.4 修改-回显
5.4.1 定义回显api
- src/api/teacher.js
<span style="background-color:#f8f8f8"><span style="color:#333333">// 查询详情 export function findById(id) { return axios.get(`/teacher-service/teacher/${id}`) }</span></span>
5.4.2 显示修改弹出框
- 添加弹出框
<span style="background-color:#f8f8f8"> <span style="color:#aa5500"><!-- 修改弹出框 --></span> <span style="color:#117700"><</span><span style="color:#117700">el-dialog</span> <span style="color:#0000cc">title</span>=<span style="color:#aa1111">"修改讲师"</span> <span style="color:#0000cc">:visible.sync</span>=<span style="color:#aa1111">"editDialogVisible"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form</span> <span style="color:#0000cc">label-width</span>=<span style="color:#aa1111">"120px"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师名称"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.name"</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师排序"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-input-number</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.sort"</span> <span style="color:#0000cc">controls-position</span>=<span style="color:#aa1111">"right"</span> <span style="color:#0000cc">:min</span>=<span style="color:#aa1111">"0"</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师头衔"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-select</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.level"</span> <span style="color:#0000cc">clearable</span> <span style="color:#0000cc">placeholder</span>=<span style="color:#aa1111">"请选择"</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--</span> <span style="color:#aa5500">数据类型一定要和取出的json中的一致，否则没法回填</span> <span style="color:#aa5500">因此，这里value使用动态绑定的值，保证其数据类型是number</span> <span style="color:#aa5500">--></span> <span style="color:#117700"><</span><span style="color:#117700">el-option</span> <span style="color:#0000cc">:value</span>=<span style="color:#aa1111">"1"</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"高级讲师"</span><span style="color:#117700">/></span> <span style="color:#117700"><</span><span style="color:#117700">el-option</span> <span style="color:#0000cc">:value</span>=<span style="color:#aa1111">"2"</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"首席讲师"</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">el-select</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师资历"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.career"</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师简介"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.intro"</span> <span style="color:#0000cc">:rows</span>=<span style="color:#aa1111">"10"</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"textarea"</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span> <span style="color:#aa5500"><!-- 讲师头像：TODO --></span> <span style="color:#117700"></</span><span style="color:#117700">el-form</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">slot</span>=<span style="color:#aa1111">"footer"</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"dialog-footer"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"editDialogVisible = false"</span><span style="color:#117700">></span>取消<span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"primary"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"updateTeacher"</span><span style="color:#117700">></span>修改<span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-dialog</span><span style="color:#117700">></span></span>
定义两个变量
<span style="background-color:#f8f8f8"> <span style="color:#000000">editDialogVisible</span>: <span style="color:#221199">false</span>, <span style="color:#aa5500">// 修改弹出框</span> <span style="color:#000000">teacher</span>: { <span style="color:#aa5500">// 表单对象</span> }</span>
5.4.3 调用回显api
- 修改 src/views/edu/teacher/list.vue
- 从api解构 findById
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 导入接口文件，并解构指定的方法</span> <span style="color:#770088">import</span> { <span style="color:#0000ff">findAll</span>,<span style="color:#0000ff">condition</span>, <span style="color:#0000ff">findById</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/api/teacher'</span></span></span>
- 编写 findTeacherById方法，调用ajax方法
<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#770088">async</span> <span style="color:#000000">findTeacherById</span>(<span style="color:#000000">tid</span>) { <span style="color:#aa5500">// 查询结果 BaseResult</span> <span style="color:#770088">let</span> { <span style="color:#0000ff">message</span>, <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">findById</span>(<span style="color:#000000">tid</span>) <span style="color:#aa5500">// 保存查询结果</span> <span style="color:#770088">this</span>.<span style="color:#000000">teacher</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">data</span> }</span></span>
修改 updateTeacherPre 方法，显示弹出框，并回显表单
<span style="background-color:#f8f8f8"> <span style="color:#000000">updateTeacherPre</span>( <span style="color:#000000">teacher</span> ) { <span style="color:#aa5500">// 显示弹出框</span> <span style="color:#770088">this</span>.<span style="color:#000000">editDialogVisible</span> <span style="color:#981a1a">=</span> <span style="color:#221199">true</span> <span style="color:#aa5500">// 查询详情</span> <span style="color:#770088">this</span>.<span style="color:#000000">findTeacherById</span>(<span style="color:#000000">teacher</span>.<span style="color:#000000">id</span>) },</span>
5.4.4 测试回显
5.4.5 定义修改api
<span style="background-color:#f8f8f8"><span style="color:#333333">// 修改讲师 export function update( teacher ) { return axios.put(`/teacher-service/teacher`, teacher) }</span></span>
5.4.6 调用修改api
<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#770088">async</span> <span style="color:#000000">updateTeacher</span>() { <span style="color:#aa5500">// 发送ajax</span> <span style="color:#770088">let</span> { <span style="color:#0000ff">message</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">update</span>( <span style="color:#770088">this</span>.<span style="color:#000000">teacher</span> ) <span style="color:#aa5500">// 提示</span> <span style="color:#770088">this</span>.<span style="color:#000000">$message</span>.<span style="color:#000000">success</span>(<span style="color:#0055aa">message</span>) <span style="color:#aa5500">// 刷新列表</span> <span style="color:#770088">this</span>.<span style="color:#000000">conditionTeacher</span>() <span style="color:#aa5500">// 关闭弹出框</span> <span style="color:#770088">this</span>.<span style="color:#000000">editDialogVisible</span> <span style="color:#981a1a">=</span> <span style="color:#221199">false</span> }</span></span>
5.4.7 测试修改
ok
5.5 删除
5.5.1定义api
<span style="background-color:#f8f8f8"><span style="color:#333333">// 通过id删除 export function deleteById(id) { return axios.delete(`/teacher-service/teacher/${id}`) }</span></span>
5.5.2 调用删除api
- 解构删除方法
<span style="background-color:#f8f8f8">// 导入接口文件，并解构指定的方法 import { findAll,condition, findById, update, deleteById } from '@/api/teacher'</span>
- 定义方法deleteTeacherById
<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#000000">deleteTeacher</span>( <span style="color:#000000">teacher</span> ) { <span style="color:#770088">this</span>.<span style="color:#000000">$confirm</span>(<span style="color:#aa1111">'您确定要删除么?'</span>, <span style="color:#aa1111">'删除提示'</span>, {<span style="color:#000000">type</span>: <span style="color:#aa1111">'warning'</span>}) .<span style="color:#000000">then</span>(<span style="color:#770088">async</span> () <span style="color:#981a1a">=></span> { <span style="color:#aa5500">// 确定</span> <span style="color:#aa5500">// 发送ajax</span> <span style="color:#770088">let</span> { <span style="color:#0000ff">message</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">deleteById</span>( <span style="color:#000000">teacher</span>.<span style="color:#000000">id</span> ) <span style="color:#aa5500">// 提示</span> <span style="color:#770088">this</span>.<span style="color:#000000">$message</span>.<span style="color:#000000">success</span>(<span style="color:#0055aa">message</span>) <span style="color:#aa5500">// 刷新列表</span> <span style="color:#770088">this</span>.<span style="color:#000000">conditionTeacher</span>() }).<span style="color:#000000">catch</span>(() <span style="color:#981a1a">=></span> { <span style="color:#aa5500">// 取消</span> }); },</span></span>
5.5.3 测试
ok
5.7 批量删除
5.7.1 后端实现
<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#aa5500">/**</span> <span style="color:#aa5500">* 批量删除</span> <span style="color:#aa5500">* @param ids</span> <span style="color:#aa5500">* @return</span> <span style="color:#aa5500">*/</span> <span style="color:#555555">@PostMapping</span>(<span style="color:#aa1111">"/deleteBatch"</span>) <span style="color:#770088">public</span> <span style="color:#000000">BaseResult</span> <span style="color:#0000ff">deleteBatch</span>(<span style="color:#555555">@RequestBody</span> <span style="color:#000000">List</span><span style="color:#981a1a"><</span><span style="color:#008855">String</span><span style="color:#981a1a">></span> <span style="color:#000000">ids</span>) { <span style="color:#008855">boolean</span> <span style="color:#000000">result</span> <span style="color:#981a1a">=</span> <span style="color:#000000">eduTeacherService</span>.<span style="color:#000000">removeByIds</span>(<span style="color:#000000">ids</span>); <span style="color:#770088">if</span>(<span style="color:#000000">result</span>) { <span style="color:#770088">return</span> <span style="color:#000000">BaseResult</span>.<span style="color:#000000">ok</span>(<span style="color:#aa1111">"批量删除成功"</span>); } <span style="color:#770088">return</span> <span style="color:#000000">BaseResult</span>.<span style="color:#000000">error</span>(<span style="color:#aa1111">"批量删除失败"</span>); }</span></span>
5.7.2 定义 api
<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#aa5500">// 批量删除</span> <span style="color:#770088">export</span> <span style="color:#770088">function</span> <span style="color:#0000ff">deleteBatch</span>( <span style="color:#0000ff">ids</span> ) { <span style="color:#770088">return</span> <span style="color:#000000">axios</span>.<span style="color:#000000">post</span>(<span style="color:#ff5500">`/teacher-service/teacher/deleteBatch`</span>, <span style="color:#0055aa">ids</span> ) }</span></span>
5.7.3 前端多选
- 添加多选框
<span style="background-color:#f8f8f8"> <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"selection"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"55"</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span></span>
- 添加多选事件
<span style="background-color:#f8f8f8"> <span style="color:#000000">handleSelectionChange</span>(<span style="color:#000000">val</span>) { <span style="color:#770088">this</span>.<span style="color:#000000">multipleSelection</span> <span style="color:#981a1a">=</span> <span style="color:#000000">val</span>; }</span>
添加多选变量
<span style="background-color:#f8f8f8"><span style="color:#000000">multipleSelection</span>: [] , <span style="color:#aa5500">//多选内容</span></span>
5.7.4 调用批量删除 api
- 解构 deleteBatch
批量删除方法
<span style="background-color:#f8f8f8"> <span style="color:#000000">deleteTeacherBatch</span>() { <span style="color:#aa5500">// 校验</span> <span style="color:#770088">if</span>(<span style="color:#770088">this</span>.<span style="color:#000000">multipleSelection</span>.<span style="color:#000000">length</span> <span style="color:#981a1a"><=</span><span style="color:#116644">0</span>) { <span style="color:#770088">this</span>.<span style="color:#000000">$message</span>.<span style="color:#000000">warning</span>(<span style="color:#aa1111">'请选择删除项'</span>) <span style="color:#770088">return</span> } <span style="color:#aa5500">// 确认</span> <span style="color:#770088">this</span>.<span style="color:#000000">$confirm</span>(<span style="color:#aa1111">'您确定要删除所选讲师么?'</span>, <span style="color:#aa1111">'批量删除提示'</span>, {<span style="color:#000000">type</span>: <span style="color:#aa1111">'error'</span>}) .<span style="color:#000000">then</span>(<span style="color:#770088">async</span> () <span style="color:#981a1a">=></span> { <span style="color:#aa5500">// 从选择内容中过滤所有的id</span> <span style="color:#770088">this</span>.<span style="color:#000000">ids</span> <span style="color:#981a1a">=</span> <span style="color:#770088">this</span>.<span style="color:#000000">multipleSelection</span>.<span style="color:#000000">map</span>(<span style="color:#0000ff">teacher</span><span style="color:#981a1a">=></span><span style="color:#0055aa">teacher</span>.<span style="color:#000000">id</span>) <span style="color:#aa5500">// 发送ajax</span> <span style="color:#770088">let</span> { <span style="color:#0000ff">message</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">deleteBatch</span>( <span style="color:#770088">this</span>.<span style="color:#000000">ids</span> ) <span style="color:#aa5500">// 提示</span> <span style="color:#770088">this</span>.<span style="color:#000000">$message</span>.<span style="color:#000000">success</span>(<span style="color:#0055aa">message</span>) <span style="color:#aa5500">// 刷新列表</span> <span style="color:#770088">this</span>.<span style="color:#000000">conditionTeacher</span>() }).<span style="color:#000000">catch</span>(() <span style="color:#981a1a">=></span> { <span style="color:#aa5500">// 取消</span> }); }</span>
5.7.5 批量按钮
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- 批量删除 --></span> <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"mini"</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"danger"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"deleteTeacherBatch"</span><span style="color:#117700">></span>批量删除<span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span></span></span>
5.7.6 测试
