vue+element-ui中表格,分页的基本使用
element-uielement-ui中分页的使用在element-ui+vue实现分页是很简单的以文章分页举例首先我们需要明确,一般的前后台分离项目对于大批量表格数据的回传格式一般为:status:状态码message:存放信息page:当前页数(一般而言mybatis也好,JPA也好,当传入0时为第一页,也会有后台人员进行处理,从1开始)pageSize:总页数(这个可以通过page,tot
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)