Vue + Element UI 表格分页记忆选中

713 阅读1分钟

官方基于这种操作给出通过属性解决的方法:

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

:reserve-selection:仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key),该属性默认值为false。

<el-table :row-key="handleRowKey">
     <el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>


<script>
export default {
  data() {
    return {
    }
  },
  methods: {
   	handleRowKey (row) {
      return row.id
    }
  },
}
</script>