el-table设置多选框selection选中切换分页之后能够保留之前选中列

最新推荐文章于 2025-07-18 10:08:37 发布

原创最新推荐文章于 2025-07-18 10:08:37 发布 · 4.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#el-table #selection #切换分页保存勾选

el-table 专栏收录该内容

1 篇文章

订阅专栏

本文介绍在Element UI的el-table组件中如何通过设置row-key和使用$refs实现多选行的全选、取消全选及单行选择状态的控制。详细展示了如何在el-table-column中使用type=selection并配合reserve-selection属性，以及如何利用Vue实例的refs属性进行选择状态的管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在el-table里面设置row-key="id"

2、在type="selection"对应el-table-column里面设置reserve-selction，如下设置

取消全部勾选：this.$refs["multipleTable"].clearSelection();

取消单行勾选：this.$refs.multipleTable.toggleRowSelection(row);

<el-table
            :border="true"
            ref="multipleTable"
            :data="eventTableData"
            tooltip-effect="dark"
            height="100%"
            style="width: 100%"
            row-key="id"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="40"
              align="center"
              reserve-selection
              :selectable="selectInit"
            ></el-table-column>
            <el-table-column
              label="序号"
              type="index"
              :index="indexMethod"
              align="center"
              width="50"
            />
</el-table>