Element-ui(el-table、el-pagination)实现表格分页

(注意:这里模仿的是后端一次性给好数据,前端进行分页)

1 表格中最主要的是分页页码和每一页的条数,和要展示的数据列表

详细配置可以去 element ui 官网 Element - The world's most popular Vue UI framework  

Table和Pagination

    <> 
    
      
      
      
      
      
      
    

    <>
    

2  js中主要配置好对应的页码和数据总条数

    export default {
    
    data() {
      return {
        //  需要模拟自己想要的数据  应复制多条
        tableData: [
            {
                name:'王小虎',
                age:18,
                sex:'男'
            },
        ],
        total:0 ,
        //默认一页十条
        pagesize:10,
        currentPage:1
      }
    },
    mounted() {
       this.total=this.tableData.length;
    },
    methods: {
      
      // 这里拿到页码 并赋值
      current_change:function(currentPage){
        this.currentPage = currentPage;
      },
   
    }

你可能感兴趣的:(vue,ui,elementui,vue.js)