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"
>
  • 1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,有些不正确的地方,仅供参考。
  • 2.本站中会转载我认为有用的博客文章,添加一些外链网站地址,但这些博客文章、论坛和网站上的内容和我没有关系,不代表我的意见,请网友自己多注意辨别。
  • 3.本站中转载文章会写明来源(点击下方链接按钮即可),感谢原作者的辛苦写作,如果有异议,及时联系我处理,谢谢!
  • 4.欢迎指出有问题的地方,我会尽快修正,谢谢!

系统由 Nginx + Next.js + React + Node + TailWindCss 驱动

沪ICP备20021316号