<template>
<div>
<el-table
:data="list.slice((this.query.pageNum - 1) * this.query.pageSize, this.query.pageNum * this.query.pageSize)">
<el-table-column label="服务名" width="200px" prop="serviceName" show-overflow-tooltip></el-table-column>
<el-table-column label="告警对象" prop="instanceName">
<template slot-scope="scope">{{ scope.row.instanceName.replace(',',' , ') }}</template>
</el-table-column>
</el-table>
<el-pagination :current-page.sync="query.pageNum" :page-size="query.pageSize"
layout="total,prev, pager, next,sizes,jumper" :total="list.length" @current-change="handleCurrentChange"
@size-change="changeSizeHandler" size="small"></el-pagination>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: function () {
return []
}
}
},
data() {
return {
query: {
pageNum: 1,
pageSize: 10
}
}
},
methods: {
changeSizeHandler(size) {
this.query.pageSize = size
},
handleCurrentChange(currentPage) {
this.query.pageNum = currentPage
}
}
}
</script>
此处的表格数据是从父页面传过来的数据,数组。
另如果表格要用多选,这个
<el-table :data="list.slice((this.query.pageNum - 1) * this.query.pageSize, this.query.pageNum * this.query.pageSize)">直接在页面里面写silce计算方法很可能会有一个bug出现,就是多选选不动
解决办法:
写一个中间变量listShow,list在script中进行分页数据计算,赋值给listShow,表格页面里写listShow,如下示例:
changeSizeHandler(size) {
this.query.pageSize = size
this.listShow = this.list.slice((this.query.pageNum - 1) * this.query.pageSize,
this.query.pageNum * this.query.pageSize)
},
handleCurrentChange(currentPage) {
this.query.pageNum = currentPage
this.listShow = this.list.slice((this.query.pageNum - 1) * this.query.pageSize,
this.query.pageNum * this.query.pageSize)
},