【已解决】el-table分页回显与多选删除功能冲突（reserve-selection）

---

文档 | Element——el-table
文档 | Element——el-pagination

---

进入正题之前先看一下这两个功能分别是如何实现的

el-table 批量删除

批量删除关键代码如下：

<el-table
	ref="sitesTable"
	:data="tableDataList"
	@selection-change="handleSelectionChange"
	row-key="id"
>
	<el-table-column
		type="selection"
		:reserve-selection="false"
	>

• el-table
  • ref：表名，在js中可以使用this.$refs.表名来调用el-table提供的一些属性和方法，详细后面会说到
  • data：绑定el-table的数据源
  • @selection-change：当选择项发生变化时会触发该事件，默认带一个参数：选中的数据对象组成的一个数组——selection
  • row-key：行数据的 Key，用来优化 Table 的渲染
• el-table-column
  • type：设置selection 为多选框
  • reserve-selection：仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key），默认false

有了这些el-table的单页多选功能就可以使用了

批量删除功能需要设置以下方法：

// 将选中的selection拿出来，后面批量删除会用到
handleSelectionChange(val) {
	this.selectList = val
},
// 批量删除，重拉数据，并置空selectList 
async deleteSites() {
	if (confirm('确认删除?')) {
		for (let item of this.selectList) {
			// 通过vuex的action调用封装的ajax调用后端接口的方法来完成对数据库的操作
			await this.$store.dispatch('deleteSite', item)
			this.$message({
				message: '删除成功',
				type: 'success',
			})
		}
		this.getSites()
		this.selectList = []
	}
},

接下来设置按钮触发即可

el-table 分页回显

实现分页首先引入el-pagination：

<el-pagination
	@size-change="handleSizeChange"
	@current-change="handleCurrentChange"
	:current-page.sync="currentPage"
	:page-sizes="pagesizes"
	:page-size="pagesize"
	layout="total, sizes, prev, pager, next, jumper, slot"
	:total="this.$store.getters.sites.length"
	:hide-on-single-page="true"
>
	<span>已选中 {{ selectList.length }} 条</span>
</el-pagination>

el-pagination

• @size-change：pageSize 改变时会触发，回调参数：每页条数（pageSize）
• @current-change：currentPage 改变时会触发，回调参数：当前页（currentPage）
• current-page：当前页（currentPage）
• page-sizes：每页条数（pageSize）组成的一个数组
• page-size：每页条数（pageSize）
• layout：组件布局，子组件名用逗号分隔
• total：总条目数
• hide-on-single-page：只有一页时是否隐藏

js部分：

data() {
	return {
		currentPage: 1,
		pagesize: 5,
		pagesizes: [5, 6, 10, 15]
	}
}
computed: {
	tableDataList() {
		return this.$store.getters.sites.slice(
			(this.currentPage - 1) * this.pagesize,
			this.currentPage * this.pagesize
		)
	},
},
method: {
	handleSizeChange(pagesize) {
		this.pagesize = pagesize
	},
	handleCurrentChange(currentPage) {
		this.currentPage = currentPage
	},
}
...

el-table的数据源需要放到计算属性中，原因可见：【已解决】使用el-pagination后el-table的多选框无法勾选（触发两次handleSelectionChange）

这些弄完之后还有最重要的一步就是：

<el-table-column
	type="selection"
	:reserve-selection="true"
>

设置reserve-selection为true，这样才能存储翻页后选中的数据

就在这里，矛盾就出现了，分页回显需要设置存储选中数据，而批量删除需要设置其为false，以便在批量删除数据后this.$refs.表名.selection直接清空

找到问题关键，解决问题

reserve-selection

• true：分页回显有效（批删表头不变）
• false：分页回显无效（批删表头可变）

没有办法，现在只能让reserve-selection保持一个值，那就需要看这两方面哪一方面好解决：

• 方法一：翻页后保存上一页数据，翻回来后还原数据，最后批量删除时将此时的selectList（此时应该是长度为页数的二维数组）转为一维数组进行删除操作
• 方法二：批量删除后手动清空this.$refs.表名.selection

经过尝试，方法一失败，具体之后补充
方法二相对容易一些：
方法二遇到的第一个障碍是Computed property "selection" was assigned to but it has no setter.，看来又是一个计算属性，不能外部赋值，那就利用小技巧：

• length赋值为0
• ary.splice(0,ary.length)
  两种清空方式经实验均可
  在分析this.$refs.表名的过程中，发现一个自带方法clearSelection（其实文档中也有），可使用this.$refs.表名clearSelection直接清空selection，推荐使用