今天出现了一个问题，搜索后分页组件没有成功分页。用了elementUI的drawer抽屉组件。点击出现抽屉，在抽屉中渲染一个列表，列表初始只显示10条数据，其他数据需要自己搜索。有一个输入框，输入关键字后回车实现搜索数据。搜索出来的结果分页显示，每页10条，此时使用了前端分页组件，将搜索结果传给该组件进行前端分页。
出现的问题是，第一次进入抽屉列表，输入内容后搜索，后台返回的数据是17条，但是抽屉列表只渲染了10条数据，只有第一页，第二页的数据没有出现，并且分页器也只有第一页的页码。关闭抽屉列表再次打开，重新搜索，发现分页功能又正常了。
经过排查，发现是初次进入抽屉列表进行搜索时，前端分页组件获取不到总的数据条数。因为使用了watch监听获取总的数据条数，但是不是深度监听，所以首次挂载不会触发，newData.length没有被赋值，所以在第二次搜索的时候才成功实现分页。
解决方法一：在父组件中将总的数据条数传给前端分页组件，前端分页组件接收并使用。
解决方法二：将前端分页组件中的watch监听改为深度监听即可。如下所示：
watch: {
data: {
immediate:true,
handler(newData){
this.totalSize = newData.length,
this.onCurrentChangeHandler(1);
}
},
},
分页组件内容如下：
<template>
<el-pagination
:current-page.sync="currentPage"
:page-size="pageSize"
:total="totalSize"
layout="prev, pager, next"
background
@size-change="onSizeChangeHandler"
@current-change="onCurrentChangeHandler"
/>
</template>
<script>
import _ from 'lodash'
export default {
name: 'TablePagination',
props: {
// 从后台获取到的数据ruleList
data: {
default: function() {
return []
},
type: Array
}
},
data() {
return {
currentPage: 1,
pageSize: 10,
pageSizeArr: [5, 10, 20, 50, 100],
totalSize: 0
}
},
watch: {
data(newData){
this.totalSize = newData.length,
this.onCurrentChangeHandler(1);
}
},
methods: {
// currentPage 改变时会触发
onCurrentChangeHandler(pageIndex) {
this.$emit('onTableChange', this.sliceRightData(pageIndex))
},
// 分页逻辑
sliceRightData(pageIndex) {
const data = this.data
if (_.isEmpty(data)) {
return []
} else {
return data.slice((pageIndex - 1) * this.pageSize, pageIndex * this.pageSize)
}
},
// pageSize 改变时会触发：
onSizeChangeHandler(val) {
this.pageSize = val
this.currentPage = 1
this.onCurrentChangeHandler(1)
}
}
}
</script>
