1.设置两个字段page,size,来存储当前点击的页,和每页的行数,然后在表格数据这里设置,:data=“列表数据.slice((page - 1) *size, page *page_size)”
2.el-pagination分页器中配置一下
@current-change=“answerPageChange” 当前页码(函数)主要是确定点击的是第几页,然后改变page的
:current-page.sync=“page” 页码
:page-size=“size” 每页显示多少个
layout=“prev, pager, next, jumper” 需要的功能,具体可以看官网
:total=“orderManagementContent.length” 总条数,必须要有,不然不能分页
<el-table :data="comment_content.slice((goods_page_config.page - 1) *goods_page_config.page_size, goods_page_config.page * goods_page_config.page_size)" style="width: 100%; flex: 1" size="medium" border
:header-cell-style="{ fontWeight: 'normal', color: '#666', background: '#F6F6F6', fontSize: '16px', height: '60px' }"
:cell-style="{ fontSize: '12px', color: '#333', height: '70px', }">
</el-table>
<div class="pagination">
<el-pagination
@current-change="answerPageChange"
:current-page.sync="answer_page_config.page"
:page-size="answer_page_config.page_size"
layout="prev, pager, next, jumper"
:total="comment_content.length">
</el-pagination>
</div>
//设置的数据
comment_content:[],
answer_page_config: {
page: 1,
page_size: 5,
},
answerPageChange(val) {
//val 当前页码
this.answer_page_config.page = val;
},
3.删除列表中的行
<el-table-column label="操作" align="center" width="220px">
<template slot-scope="scope">
<div class="link-list">
<el-link type="danger" :underline="false" @click="deleteGoods(scope.row)">删除</el-link>
</div>
</template>
</el-table-column>
deleteGoods(rows) {
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}) .then(() => {
//order_no 一个唯一标识符
this.comment_content=this.comment_content.filter(item=>item.order_no!=rows.order_no)
this.$message({
type: "success",
message: "删除成功!",
});
}).catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},