vue+elementui 之 table+pagination

<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
border
stripe
width="300">
<el-table-column type="selection"
align="center"
width="80">
</el-table-column>
<el-table-column
prop="name"
label="名称"
align="center"
width="160">
</el-table-column>
<el-table-column
prop="level"
label="精装级别"
align="center"
width="160">
</el-table-column>
<el-table-column
prop="creator"
label="创建人"
align="center"
width="160">
</el-table-column>
<el-table-column
label="状态"
align="center"
width="160">
<template slot-scope="scope">
<span v-if="scope.row.status==='草稿'">1</span>
<span v-else-if="scope.row.status==='有效'">2</span>
<span v-else="scope.row.status==='失效'">3</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="创建时间"
align="center"
width="160">
</el-table-column>
<el-table-column label="操作"  align="center">
<template slot-scope="scope">
<div v-if="scope.row.status==='有效'">
<el-button type="text"
@click="dialogVisible = true" data-num="number">失效</el-button>
<el-button type="text"
@click="listCheck(scope.$index, scope.row)">查看</el-button>
</div>
<div  v-if="scope.row.status==='失效'">
<el-button type="text"
@click="listCheck(scope.$index, scope.row)">查看</el-button>
</div>
<div  v-if="scope.row.status==='草稿'">
<el-button type="text"
@click="listEdit(scope.$index, scope.row)">编辑</el-button>
</div>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination class="pagination"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 50]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>

<script>
export default {
data() {
return {
tableData: [],
total: 0,
currentPage: 1,
table_index: 999,
pagesize: 5
}
},
components: {

},
created() {
const listUrl = 'https://easy-mock.com/mock/5ab1d3faa93c6716f0951afa/longhuMsg/configList'
this.$axios.get(listUrl).then((response) => {
this.tableData = response.data.data.listData
this.total = response.data.data.listData.length
})
},
methods: {
handleSizeChange(size) {
this.pagesize = size
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage
},
listEdit(index, row) {
this.dialogFormVisible = true
this.form = Object.assign({}, row)
this.table_index = index
},
listCheck() {
console.log(1)
}
}
}
</script>