console.log(res.data); console.log(typeof res.data.retData.total_page); const total_page = parseInt(res.data.retData.total_page); console.log(typeof total_page); if(res.data.errCode==0){ this.total_page = total_page; this .tableData = res.data.retData.list; }else if(res.data....
console.log(res.data); console.log(typeof res.data.retData.total_page); const total_page = parseInt(res.data.retData.total_page); console.log(typeof total_page); if(res.data.errCode==0){ this.total_page = total_page; this .tableData = res.data.retData.list; }else if(res.data....
pageCount:1, pageSize: 20 }; }, components: { Paginate }, created () { // 计算当前页数 this.pageCount =this.count/this.pageSize // 如果count小于pageSize则不显示页码 if(this.count <this.pageSize){ this.noLiSurround =true }
Vue.component('page-component',{ props:['pagecount','pageindex','pagesize'], data () { return { current:this.pageindex, showItem:this.pagesize, allPage:this.pagecount } }, template:` 上一页 {{index}} 下一页
methods:{increment(){this.count+=1;},decrement(){this.count-=1;}} 我们所要做的就是更新count,Vue 会检测到这个变化,然后用新值重新渲染我们的应用程序 Vue 的响应系统有很多细微的差别,如果你想要高效地使用Vue,理解它是非常重要的。如果你想更深入地了解Vue的响应系统,这里有更多要了解的东西。
<el-pagination small layout="total,prev,pager,next,jumper" :total="tableData.length" :page-size="pagesize" pager-count="5" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> 代码语言:javascript 代码运行次数:0 运行 AI代码解释 data(){ return{ pagesize:5, ...
{ pageSize:5,//每页显示条数 6条刚好 currentPage:1,//当前页 pagerCount:5,//按钮数,超过时会折叠 total:10 //总条数 } } } }, data () { return { childSelectedValue:this.value, } }, watch:{ //监听子组件中选择的值得变化,每当选择一个项后,触发input事件, // 将子组件中选择的值通过...
current-page="tableData.pageNumber" :page-size="tableData.pageSize" :page-sizes="[10, 15, 20, 30, 50]" :total="computedTableData.length" :pager-count="5" @current-change="handleCurrentChange" @size-change="handleSizeChange" > </el-pagination> </template> export default { data...
由于获取数据条件的变化(假设是个搜索,关键词变了),count是不定的;再或者,有个select下拉框,来控制每页显示的数据量pageSize,当它变化的时候,总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。 了解了流程,在Vue中实现一个分页组件也就变得简单了。
<el-pagination v-if="rooms.length > 0" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" :pager-count="3" layout="prev, pager, next, jumper" :total="roomTotal"> </el-pagination> js部分 data() { return { rooms:[], currentPage...