1.页面代码
根据分页容量来限制每页条数:list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
获取分页中每条数据的序号(currentPage - 1) * pageSize+scope.$index + 1
<el-table :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border fit highlight-current-row>
<el-table-column label="序号" width="70" align="center">
<template slot-scope="scope">
{{(currentPage - 1) * pageSize+scope.$index + 1 }}
<!-- {{ (page - 1) * limit + scope.$index + 1 }} -->
</template>
</el-table-column>
<el-table-column prop="articleTitle" label="文章标题" width="350" />
<el-table-column label="头衔" width="80">
<template slot-scope="scope">
{{ scope.row.level === 1 ? "高级讲师" : "首席讲师" }}
</template>
</el-table-column>
<el-table-column prop="intro" label="资历" />
<el-table-column prop="gmtCreate" label="创建时间" width="160" />
<el-table-column prop="sort" label="排序" width="60" />
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<router-link :to="'/teacher/edit/' + scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit"
>修改</el-button
>
</router-link>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeDataById(scope.row.id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
page-size:页面容量
total:总条数
<el-pagination
@current-change="change"
background
layout="total,prev, pager, next,jumper"
:page-size="pageSize"
:total="list.length"
></el-pagination>
<script>
export default {
data() {
return {
pageSize: 8,
total: 10,
currentPage: 1,
list: null,
};
},
methods: {
change(currentPage) {
this.currentPage = currentPage;
},
//
getArticleList() {
var _this = this;
this.$axios
.get("http://localhost:8088/articles/findAllArticles")
.then(function (resp) {
//将取得的数据赋值给list
_this.list = resp.data.data.Articles;
});
},
},
created() {
this.getArticleList();
},
};
</script>