element-ui table分页/筛选后保留勾选项

最新推荐文章于 2024-03-26 10:39:06 发布

GGxGx

最新推荐文章于 2024-03-26 10:39:06 发布

阅读量804

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Guoxuxinwen/article/details/126954649

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在使用elementui中的table时，有时会涉及到勾选完数据切换页数或者使用搜索框搜索后已勾选数据消失，而elementul有个属性可以处理这个情况，reserve-selection和row-key搭配使用。

使用步骤：

在table上加上 :row-key=“getRowKey” （或者 row-key="id"若直接绑定id，则不需要第三步，取决于绑定的值是否可以直接拿到或者table是否抽离为公共组件）；
在type=“selection” 那一列标签上写 :reserve-selection=“true”
在methods中编写方法getRowKey

<template>
  <span>
      <el-table
      	ref="table"
        :row-key="getRowKey"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
         type="selection"
         :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column
         prop="name"
         label="姓名"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </span>
</template>

<script>
export default {
  methods: {
    getRowKey(row) {
      return row.id;
    },
    handleSelectionChange (list) {
	  console.log('选中的数据', list)
	}
};
</script>