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

element-ui

element-ui中分页的使用

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

以文章分页举例

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

status:状态码

message:存放信息

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

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

total:数据总条数

data:回传的数据

<!-- 分页 -->

<!-- articles为查询后台得到的数据 -->
<!-- changePage为对应的页数改变函数，同时，不用携带参数，在js中会自动填入当前页数作为参数 -->
<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中表格的使用

<!-- 文章表格 -->
<!-- @cell-click当点击该单元格是触发的事件 -->
<!-- articles.list为待加载的数据 -->
<!-- 与以往的table标签稍微不同,element-ui中以列为主 -->
<!-- el-table-column为一列，其中prop为遍历articles.list中的数据 -->
<!-- 通过scope.row可以拿到本行的信息，诸如id,content等，大大简化了操作 -->
<!-- scope.column可以拿到本列列名等信息 -->

<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="操作">
        <!-- 插槽 -->
        <!-- 通过插槽中往事件中传入scope可以拿到对应的列和行信息 -->
        <template slot-scope="scope">
            <el-button type="danger" plain @click='deleteArticle(scope)'>删除</el-button>
        </template>
    </el-table-column>
</el-table>