基于element-ui开发组件自行制作的翻页小组件

表格展示区

<el-table :data="dis" style="width: 100%;height: 525px;">
</el-table>

翻页区

<to-page :value="{
            page : tableData.length,
            current_page:current_page
            }" 
                @exchange="exchange"
            ></to-page>

scprit

data() {
      return {
        tableData: [
            。。。巴拉巴拉你的json列表
        ],
        current_page:1,<!--你的当前页数-->
        dis:[],<!--你希望展示的数据-->
      }
    },
    methods:{
        exchange(val){//页面跳转
            console.log(val)
            this.current_page = val
        },

    },
    mounted(){
        let a=1
        for (let i=10*(this.current_page-1);i<this.tableData.length;i++){
            this.dis.push(this.tableData[i])
            if(a === 10){
                break
            }
            a+=1
        }
        console.log('dis现在的长度为'+this.dis.length)
    },
    watch:{
        current_page(){<!--跟随当前的页数翻页-->
            this.dis = []
            for (let i=(this.current_page-1)*10;i<this.tableData.length;i++)
                this.dis.push(this.tableData[i])
            }
    }            

 

翻页的子组件

  <div>
    <div class="block" style="margin: 2% 25%;">
            <el-pagination
                layout="total, prev, pager, next, jumper"
                :total="value.page"
                
                @prev-click="last"
                @next-click="next"
                @current-change="go"
                >
            </el-pagination>
        </div>
  </div>

script

    data(){
        return {
            currentPage:1,
        }
    },
    props:['value'],
    methods:{
        next(){
            this.currentPage+=1
            this.$emit('next',this.currentPage)
        },
        last(){
            this.currentPage-=1
            this.$emit('last',this.currentPage)
        },
        go(val){
            this.currentPage=val
            this.$emit('exchange',val)
        }
    },
    watch:{
        value(){
            this.currentPage = this.value.current_page<!--跟随着页面的当前页数更新-->
        }
    }

呃呃标明出处了，饿了么，饿了么！