IView的分页结合表格用法

IView的分页结合表格用法

HTML:

<Table border stripe ref="selection" :columns="columns" :data="nowData"></Table>
<Page :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="_nowPageSize"
      show-total show-sizer show-elevator/>

表格：
columns：表头数据
data：数据
分页：
total：数据总数
page-size：每页显示多少条数据
on-change：改变页码回调，返回值：当前页码
on-page-size-change：切换每页条数时回调，返回值：每页的数据条数

JS：

data(){
        return{
            columns:['表头'],
            data:['数据'],
            nowData:[],//当前页显示的数据数组
            //分页
            pageSize: 5,//每页显示多少条
            dataCount: 0,//总条数
            pageCurrent: 1,//当前页码
        }
    }

methods：

//所有数据 
　　　_getData() {
        //所有数据
        this.data = [];
        for (let i = 0; i < 100; i++) {
          let a = {
            id: i,
            idName: 'Mr.Li' + i,
            name: '小李',
            organization: '国务院',
            people: '老李',
            state: '活跃',
          };
          this.data.push(a);
        }
        //分页显示所有数据总数
        this.dataCount = this.data.length;
        //展示页面刚加载时需要的数据
        this.nowData = [];
        for (let i = 0; i < this.pageSize; i++) {
          this.nowData.push(this.data[i]);
        }
      },
//点击，切换页面
      changepage(index) {
        //需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
        let _start = (index - 1) * this.pageSize;
        //需要显示结束数据的index
        let _end = index * this.pageSize;
        //截取需要显示的数据
        this.nowData = this.data.slice(_start, _end);
        //储存当前页
        this.pageCurrent = index;
      },
//每页显示的数据条数
      _nowPageSize(index) {
        //实时获取当前需要显示的条数
        this.pageSize = index;
      },

mounted:方法

mounted() {
    this.$nextTick(()=>{
      this._getData();
    })
}

整体代码：

export default {
  name: "spiderEngine",
  data() {
    return {
      data: [],
      nowData: [],//当前页显示的数据数组
      columns: [
        {
          title: 'Id',
          key: 'id'
        },
        {
          title: 'IdName',
          key: 'idName'
        },
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Organization',
          key: 'organization'
        },
        {
          title: 'People',
          key: 'people'
        }, {
          title: 'State',
          key: 'state'
        }
      ],
      pageSize: 5,//每页显示多少条
      dataCount: 0,//总条数
      pageCurrent: 1,//当前页码
     
    }
  },
    methods: {
        //所有数据
        _getData() {
            //所有数据
            this.data = [];
            for (let i = 0; i < 100; i++) {
                let a = {
                    id: i,
                    idName: 'MR.LI' + i,
                    name: '小李',
                    organization: '国务院',
                    people: '老李',
                    state: '活跃'
                };
                this.data.push(a);
            }
            //分页显示所有数据总数
            this.dataCount = this.data.length;
            //展示页面刚加载时需要的数据
            this.nowData = [];
            for (let i = 0; i < this.pageSize; i++) {
                this.nowData.push(this.data[i]);
            }
        },
        //点击，切换页面
        changePage(index) {
            //需要显示开始数据的index,（因为数据时从0开始的，页码是从1开始的，需要-1）
            let _start = (index - 1) * this.pageSize;
            //需要显示结束数据的index
            let _end = index * this.pageSize;
            //截取需要显示的数据
            this.nowData = this.data.slice(_start, _end);
            //存储当前页
            this.pageCurrent = index;
        },
        //每页显示的数据条数
        _nowPageSize(index) {
            //实时获取当前需要显示的条数
            this.pageSize = index;
        },
    },
      mounted() {
        this.$nextTick(() => {
          this._getData();
        })
      }
    }

转载于：https://www.cnblogs.com/xinchenhui/p/9604364.html