第一阶段-无后端Vue展示表格数据核心代码div idapp classcontainer h2 classmb-4 text-center 流浪猫信息看板/h2 !-- 数据表格 -- table classtable table-striped table-hover align-middle thead classtable-dark tr th classtext-centerID/th th名字/th th classtext-center性别/th th classtext-center年龄/th th位置/th th classtext-center领养状态/th th classtext-center健康状态/th th classtext-center是否绝育/th /tr /thead tbody !-- v-for 循环渲染列表 -- tr v-forcat in catList :keycat.id td classtext-center{{ cat.id }}/td td{{ cat.name }}/td td classtext-center{{ cat.gender }}/td td classtext-center{{ cat.age }}/td td{{ cat.location }}/td td classtext-center span classbadge :classcat.adoptionStatus 已领养 ? bg-secondary : bg-success {{ cat.adoptionStatus }} /span /td td classtext-center{{ cat.healthStatus }}/td td classtext-center{{ cat.sterilized }}/td /tr tr v-ifcatList.length 0 td colspan9 classtext-center text-muted py-3暂无数据快去添加一只吧/td /tr /tbody /table /div第二阶段-无后端ELEMENT展示表格数据分页核心代码就是组件上的两个时间监听器还有Vue实例里面的computed.methods还有就是要注意el-table绑定的数据是我们已经过计算的currentPageData第三阶段-有后端组件展示数据并分页主要就是依据下面这个思考流程后面基本上再次基础上添加更改就可以了