el-table翻页记忆勾选

原创已于 2023-03-27 16:18:37 修改 · 976 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-03-10 15:05:59 首次发布

JavaScript 同时被 3 个专栏收录

20 篇文章

订阅专栏

Vue

16 篇文章

订阅专栏

Vue+element

5 篇文章

订阅专栏

该文章介绍了一个在Vue.js应用中处理分页表格的场景，如何实现在不同页面间切换时保持用户批量删除功能中所选中的行。通过使用`el-table`的`reserve-selection`属性和`selection-change`事件，结合`$refs`来管理选中状态，并在数据变更时同步选中项。

表格是分页的，要做一个批量删除功能，第一页勾选的数据到了第二页再回到第一页依然要保留勾选的数据，实现如下：

<el-table ref="tableRef":data="tableList" :row-key="getRowKey" @selection-change="handleSelectionChange">
	<el-table-column fixed="left" type="selection" width="45" :reserve-selection="true" />
	<el-table-column label="用户名" props="userName"></el-table-column>
<el-table>
<script>
export default {
	data() {
		return {
			tableList: [],
			selectList: [] //勾选的数据
		}
	},
	
	mounted: {
		this.getTableList();
	},
	
	methods: {
		getTableList() {
			let data = [{userName: "白小白"}];
			this.tableList = data;
			this.$nextTick(() => {
	           this.setSelectRow();
	        });
		},
		//勾选
	    handleSelectionChange(val) {
	      this.selectedList = val;
	    },
	    
	    //取消多选
	    cancelMultiple() {
	      this.$refs.tableRef.clearSelection();
	    },
	
	    // 批量操作的id
	    getRowKey(row) {
	      return row.id;
	    },
	    //设置选中
	    setSelectRow() {
	      let ids = this.selectedList.map((item) => item.id);
	      if (this.tableList && this.tableList.length) {
	        this.tableList.forEach((item) => {
	          if (ids.length > 0) {
	            if (ids.indexOf(item.id) !== -1 && item) {
	              this.$refs.tableRef.toggleRowSelection(item, true);
	            }
	          } else {
	            this.$refs.tableRef.toggleRowSelection(item, false);
	            this.cancelMultiple();
	          }
	        });
	      }
	    },
	}
}
</script>