文章目录
进入正题之前先看一下这两个功能分别是如何实现的
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 的渲染
- ref:表名,在js中可以使用
- 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
,推荐使用