elementui实现表表格el-table分页，默认选中，回显

最新推荐文章于 2024-09-20 09:53:20 发布

yy_demo

最新推荐文章于 2024-09-20 09:53:20 发布

阅读量1.9k

点赞数 9

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/yy_demo/article/details/134712372

版权

文章介绍了在使用Vue的el-table组件时，如何处理默认选中项和分页情况下数据同步的问题，强调了ref、row-key、selection-change等属性的作用，以及避免因分页导致数据不完整的方法。

摘要由CSDN通过智能技术生成

<el-table ref="multipleTable" v-loading="loading" :data="userList" :row-key="getRowKey" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" :reserve-selection="true" />
            <el-table-column label="序号" align="center" type="index" />
</el-table>

首先表格上可以参考上面代码，ref、row-key、selection-change、type="selection"、:reserve-selection="true"都是需要设置的，并且表格绑定的data初始值不能为null，可以设置[],

需要设置一个数组，用来存放所有需要默认显示的数据，然后判断表格数据id和需要默认选中的id是否一致，一致的就显示出来，