prop接收数据修改之后再次传回会报错,不允许修改
prop数据流,只能单向传递,不能修改由外层传来的props数据,通过传递方法来拿到数据
组件页面(pagination.vue)
<template>
<div>
<div class="block" style="margin-top:15px;">
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10,20,30,50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.tableData.length">
</el-pagination>
</div>
</div>
</template>
组件页面js(pagination.vue)
<script>
export default {
props: {
handleSizeChange: {
type: Function,
default: () => null
},
handleCurrentChange: {
type: Function,
default: () => null
},
pageSize: {
type: Number,
default: ""
},
currentPage: {
type: Number,
default: ""
}
}
}
</script>
调用页面
import pagination from "pagination" //先引入
export default {
components: {
//注册组件
pagination
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
this.currentPage = val;
},
//获取全部数据
search() {
let $this = this
requests.post({
url: "后台地址",
date: {
//请求接口的时候把一共有多少数据,一页显示几行都附带
pageSize: $this.pageSize,
//$this.tableData.tableData.length是代表一共有多少数据
pageNum: $this.tableData.tableData.length
},
success: function (res) {
//res.data.list后台返回数据
// $this.tableData.tableData是我自己存放后台数据的地方
$this.tableData.tableData = res.data.list
}
})
},
}
data() {
return {
// 当前分页
currentPage:1,
// 每页显示数量
pageSize:10,
//tableData表格数据
tableData: {
//提前定义好的表头
fields: [],
//表格内容
tableData: []
//这块数据看不懂的可以去看我之前的文字。对这块有解释和代码,本期主要记录分页
},
}
}
}