这是我得父组件
<template>
<div class="table-wrap">
<Table
ref="table"
:data="arrList"
:columns="currColumns"
:loading="loading"
no-data-text="暂时没有数据"
@on-selection-change="handleSelectChange"
></Table>
<div class="table-page" v-show="pageable">
<!-- <span>{{ page.currPageSize }}</span> -->
<Page
:total="page.currTotal"
:current="page.currCurrent"
show-total
show-elevator
transfer
:page-size-opts="[10,20,30]" @on-page-size-change="pagesizechange" show-sizer
placement="top"
@on-change="pageChange"
>
<span style="">共{{ page.currTotal }}条</span>
<span>{{ pageNum }} 条 / 页 共{{page.totalPageCount}}页</span>
</Page>
</div>
</div>
</template>
<script>
export default {
name: "dtTable",
props: {
url: String,
params: {
type: Object,
default() {
return {};
}
},
columns: {
type: Array,
default() {
return [];
}
},
pageable: {
type: Boolean,
default: true
}
},
data() {
return {
loading: false,
currUrl: this.url,
currParams: this.params,
currColumns: this.columns,
arrList: [],
page: {
currTotal: 0,
currCurrent: 1,
currPageSize: 10,
totalPageCount:1,
},
selection: [],
pageNum: "",
tableResult: ""
};
},
watch: {
arrList(val) {
this.pageNum = val.length;
},
params(val) {
this.currParams = val;
this.getList();
}
},
computed: {},
mounted() {
this.getList();
},
methods: {
getList() {
this.selection = [];
this.loading = true;
var param = Object.assign({}, this.currParams, {
pageNo: this.page.currCurrent,
pageSize: this.page.currPageSize
});
this.$http.post(this.currUrl, param).then(res => {
this.loading = false;
this.arrList = res.data.list;
this.tableResult = res.data;
// this.arrList = res.data;
if( Number(res.data.totalCount) == "NaN"){
this.page.currTotal = 0;
}else{
this.page.currTotal = Number(res.data.totalCount);
console.log(this.page.currTotal);
this.page.totalPageCount = Number(res.data.totalPageCount);
}
this.page.currPageSize = Number(res.data.list.length);
});
},
pageChange(num) {
this.page.currCurrent = num;
this.getList();
},
pagesizechange(pageSize){
this.page.currPageSize = pageSize;
this.getList();
},
handleSelectChange(selection) {
this.selection = selection;
},
// 返回选中数组,默认是id
getSelect(key = "id") {
return this.selection.map(item => item[key]);
}
},
activated() {
// isUseCache为false时才重新刷新获取数据
// 因为对list使用keep-alive来缓存组件,所以默认是会使用缓存数据的
if(!this.$route.meta.isUseCache){
this.arrList = []; // 清空原有数据
this.getList(); // 这是我们获取数据的函数
}
},
};
</script>
<style lang="less" scoped>
.table-wrap {
padding: 0px 20px;
.table-page {
text-align: right;
padding: 20px 0px;
}
}
</style>
子组件
<dt-table ref="table" url="/findTShopInfoTies" :params="params" :columns="columns" @on-selection-change="handleSelectChange"></dt-table>
输入页码
不管输入几都变为1