element-ui table分页记忆选中数据

搬砖的小白

已于 2023-11-30 16:11:51 修改

阅读量125

点赞数

分类专栏： element-ui使用心得文章标签： vue.js

于 2020-03-20 15:18:53 首次发布

本文链接：https://blog.csdn.net/weixin_43805439/article/details/104990928

版权

本文探讨了两种方案来实现Element-UI表格组件在分页切换时保持选中数据的记忆功能，其中方案一被推荐，而方案二则因为某些原因不建议使用。

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

方案1

<el-table :data="tableData" ref="table" row-key="id" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      ...
</el-table>

// 选中数据
handleSelectionChange (rows) {
   
	this.selectedData = rows
}

> reserve-selection 在数据更新之后保留之前选中的数据
> this.$refs.table.clearSelection() 清空选中的数据

方案2（不推荐）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <el-table ref="table" :data="tableData" style=