size-change:pageSize 改变时会触发;current-change:currentPage 改变时会触发;
handleSizeChange方法用来获取size的值,handleCurrentChange用来获取page的值;
加一个watch监听,用来获取随时改变的page,size;
<template>
<div>
<el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column prop="commontContent" label="内容" :formatter="decodeData" width="400px"
show-overflow-tooltip></el-table-column>
<template slot-scope="scope">
{{typeList1[scope.row.itCircleType]}}
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 40, 80]"
:page-size="size"
:current-page="page"
layout="sizes, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
type: 99, typeList: [{"key": 99, "value": "说说"}],
key: null,
page: 1,
size: 10,
total: 0,
tableData: [],
}
}
mounted() {
this.update();
},
watch: {
type: function () {
this.update();
},
page: function () {
this.update();
},
size: function () {
this.page = 1;
this.update();
}
},
methods: {
handleSizeChange(val) {
this.size = val;
},
handleCurrentChange(val) {
this.page = val;
},
update() {
this.$http.post("/(接口路径)", this.querystring.stringify({
"key": this.key,
"type": this.type,
"curPage": this.page,
"perNum": this.size,
})).then(data => {
if (!!data && data.status === 200) {
if (data.data.status === 0) {
this.tableData = data
this.total = data.data.data.iTotalRecords
} else {
this.showNotification('提示', data.data.msg)
}
} else {
this.showNotification('提示', '服务器响应不正确:' + data.status)
}
}).catch(error => this.showNotification('提示', "网络异常, 请重试."))
}
}
}
</script>