Element 切换page-sizes条数 自动触发table的 current-change
Element中,如果我们使用table组件和分页组件,如果我们切换了page-sizes,如果我们不注意会触发到table的 current-change
问题描述
分页组件中使用page-sizes
,会自动触发table的current-change
事件
<el-table
:data="houseTableData.List"
:max-height="tableHeight"
highlight-current-row
@current-change="handleHighlightCurrentChange"
/>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="houseTableProps.PageIndex"
:page-sizes="[10, 20, 50, 100, 200, 500]"
:page-size="houseTableProps.PageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="houseTableData.TotalCount"
/>
//vue3组件api,有些情况没有使用this
handleCurrentChange(page) {
houseTableProps.PageIndex = page
},
handleSizeChange(pageSizes) {
houseTableProps.PageSize = pageSizes
//此处触发方法时,自动触发了handleHighlightCurrentChange
},
handleHighlightCurrentChange(currentRow) {
this.drawer = true
tableCurrentRow.value = currentRow
}
解决方案一
其实是在切换page-sizes
后,table进行了数据重组,造成了我们的数据也发生了变化。
仔细观察一下你会发现handleHighlightCurrentChange(currentRow)
的currentRow
会变为null
只需要加下条件即可
handleHighlightCurrentChange(currentRow) {
if(currentRow){
this.drawer = true
tableCurrentRow.value = currentRow
}
}
解决方案二
替换为click事件选中
<el-table
:data="houseTableData.List"
:max-height="tableHeight"
highlight-current-row
@row-click="handleTableRowClick"
>