Element UI 分页选择保留之前选中的数据

最新推荐文章于 2024-07-18 18:14:07 发布

原创最新推荐文章于 2024-07-18 18:14:07 发布 · 887 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

VUE 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何在使用ElementUI的分页表格时，通过设置`reserve-selection`为`true`并在`row-key`中指定行的唯一标识，如`getRowKeys`方法，来实现在数据更新后保留之前选中的行数据的功能。

Element UI 分页选择保留之前选中的数据

<el-table :data="alarmTable" style="width: 100%" ref="multipleTable" :row-key="getRowKeys" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
</el-table>

<script>
 data() {
    return {
      // 获取row的key值
      getRowKeys(row) {
        return row.id;
      },
      multipleSelection:[] 
    }
 }
 methods:{
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
 }
</script>

:row-key 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

row-key=“id” 或者 :row-key=“getRowKeys” getRowKeys是个方法

reserve-selection 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）