vue+element-ui中表格，分页的基本使用

element-ui

element-ui中分页的使用

在element-ui+vue实现分页是很简单的

以文章分页举例

首先我们需要明确，一般的前后台分离项目对于大批量表格数据的回传格式一般为：

status:状态码

message:存放信息

page:当前页数(一般而言mybatis也好,JPA也好,当传入0时为第一页,也会有后台人员进行处理,从1开始)

pageSize:总页数(这个可以通过page,total计算出来)

total:数据总条数

data:回传的数据

<el-pagination
    background
    layout="prev, pager, next"
    :current-page='articles.page + 1'
    :page-size='articles.pageSize'
    :total="articles.total"
    @current-change='changePage'>
el-pagination>

// 分页
changePage(page){
    //在element-ui中，不管点击上一页还是下一页又或是具体的某一页也好，都会使page发生改变
    //将page放入watch(侦听器)
    //当page值发生改变时，将会触发对应函数
    this.params.page = page - 1
},
    
    
//侦听器，对于page进行监听
watch:{
    'params.page': function(){
        //当page发生改变，触发加载文章的函数
        this.loadArticle();
    }
},

element-ui中表格的使用

<el-table
          :data="articles.list"
          stripe
          @cell-click='showBigPicture'
          style="width: 100%">
    <el-table-column
                     prop="title"
                     label="文章标题"
                     width="180">
    el-table-column>
    <el-table-column
                     prop="content"
                     label="文章内容"
                     width="380">
    el-table-column>
    <el-table-column
                     prop="publishtime"
                     :formatter='dateFormat'
                     label="发布时间"
                     width="180">
    el-table-column>
    <el-table-column
                     prop="source"
                     label="文章封面">
        
        <template slot-scope="scope">
            <img style="height:100px" :src="scope.row.source" alt="">
        template>
    el-table-column>
    <el-table-column
                     prop="status"
                     label="文章状态">
        
        <template slot-scope="scope">
            <el-switch
                       v-model="scope.row.status"
                       :active-value='1'
                       :inactive-value='0'
                       @change='checkArticle(scope.row)'>
            el-switch>
        template>
    el-table-column>
    <el-table-column
                     label="操作">
        
        
        <template slot-scope="scope">
            <el-button type="danger" plain @click='deleteArticle(scope)'>删除el-button>
        template>
    el-table-column>
el-table>