el-table
表格多选时,只需要添加type="selection"
, row-key
及@selection-change
,如果存在分页时需要加上reserve-selection
,这里就不写具体的实现方法了,可以查看我之前的文章,这篇文章主要说一下存在的问题。
问题:
1.进入列表,勾选表格第1页的一条数据,然后切换进入第2页,再勾选一条数据
如上图,每页分别勾选了一条数据,然后保存
2.再点击编辑,进入后,不要点击第二页,直接在第一页上在勾选一条数据,然后保存,你会发现,第二页的数据消失了。如果先点击切换进入第二页,再点击保存就没问题了
疑问:这是什么情况,为什么会这样呢?
因为表格是存在分页,初始化进去的时候,只加载了第一页的数据,后面页面的数据是拿不到的,el-table组件只会存第一页选中的,当你点击一下第二页的时候,@selection-change
的参数就正常了
如果解决
那肯定是有方法解决的,使用toggleRowSelection
方法把数据硬塞进去
this.$nextTick(() => {
// this.multipleSelection:第一页和第二页选中的数据数组, this.tableList是表格数据
if (this.multipleSelection.length) {
// this.$refs.elTable 当前表格ref
this.$refs.elTable.clearSelection()
this.multipleSelection.forEach(row => {
const selectedRow = this.tableList.find(item => item.id === row.id)
if(selectedRow){
// 当前页(第一页)需要被选中的数据使其选中
this.$refs.elTable.toggleRowSelection(selectedRow, true);
}else{
// 不在当前页(第二页)的数据,也硬塞到@selection-change的参数中,这时当你在第一页选中其他数据时,selection-change的参数也会带着第二页的数据
this.$refs.elTable.toggleRowSelection(row, true);
}
})
}
})
第二种方法:
针对这种有分页的还有一种方法,就是再请求一个接口获取所有数据(如后端没提供,页码数量可填大点),然后在总的数据中查找之前选中的数据。
如allTableList
是所有数据, ids
是选中的id数据
初始化进入的时候,先请求表格总的数据,再获取表格分页数据
mounted(){
init()
},
async init(){
await setCheck()
await getTableList()
},
// 这里是请求接口获取表格分页数据
getTableList(){
// this.tableList =
},
// 这里获取所有的数据
getAllTableList(){
// 请求获取所有的数据,然后return出去
// return allList
},
// 设置选中
async setCheck() {
const allTableList = await getAllTableList()
allTableList.forEach((item) => {
if(ids.has(item.id)){
this.$refs.elTable.toggleRowSelection(item, true)
}
})
}