父组件:(引入封装的分页组件)
template部分:
<!-- 分页 -->
<paging
:tableData="tab_data"
@pageChange="pageChange"
@pageChangeSize="pageChangeSize"
></paging>
tab_data就是传递的后台返回的列表数据,传递给分页组件
父组件正常引入即可,注册
methods部分:
//分页开始了
// 页码切换
pageChange(item) {
console.log(item)
//调用方法更新页面数据
},
// 一页多少条数据
pageChangeSize(item) {
console.log(item)
//调用方法更新数据
}
子组件:
template部分:
<div class="paging">
<span>共 30 条</span>
<select name="" id="" v-model="pag_size" @change="getSelected">
<option v-for="item in pag_options" :key="item" :value="item">{
{
item}}</option>
</select>
<button @click="goFirstPage()">首页</button>
<i class="el-icon-arrow-left" @click="goUpPage()"></i>
<i class="el-icon-arrow-right" @click="goNextPage()"></i>
<button @click="goLastPage()">尾页</button>
<label for="">前往<input type="text" v-model="page" @keydown.enter="goPage()">页</label>
</div>
****重点部分:****
<script>
export default {
props: ['tableData'],
created() {
console.log(this.tableData)
},
mounted() {
},
data() {
return