vue.js中怎么实现分页显示

发布网友发布时间：2022-04-21 02:10

共1个回答

热心网友时间：2022-04-20 01:27

　　<vuetable listdata="{{datalist}}" clickcallback="{{callback}}"></vuetable>
　　<pages pages="{{@ pages}}" clickhandle="{{search}}"></pages>
　　其中vuetable组件负责数据展示功能，里面内容暂且不表，pages组件实现分页功能，如下：
　　<div>
　　<ul>
　　<li v-on="click:leftclick" v-show="leftbtn"><a>《</a></li>
　　<li class="pageindex" v-repeat="showlength" v-on="click:clickhandle(currentIndex+$index,$event)"><a>{{currentIndex+$index}}</a></li>
　　<li v-on="click:rightclick" v-show="rightbtn"><a></a></li>
　　</ul>
　　</div>
　　class为pageindex的 li 的点击事件里面将要显示的index 传给 props传递过来的 clickhandle,
　　clickhandle会根据index，返回后更新 datalist，完成分页功能。