【已解决】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-selectiontrue,这样才能存储翻页后选中的数据

就在这里,矛盾就出现了,分页回显需要设置存储选中数据,而批量删除需要设置其为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,推荐使用
上一篇:js实现复制功能兼容ios


下一篇:论文阅读报告:Feature Selection for Multi-label Classification Using Neighborhood Preservation,Zhiling Cai