目录
背景描述
实现效果
详细开发
1.模拟数据和页面布局
2.跨页勾选和点击勾选功能
3.表头全选
4. 全选全部
(1)全选后禁用表格勾选(简单)
(2)真正意义上的全选全部(难)
总结
背景描述
表格的全选、部分勾选、跨页勾选、本页全选,这几个功能,有很多实现的方法,先说如何保留勾选状态:
1.在表格的数据源中添加一个用于标记选中状态的属性,通常为 selected,
当用户单击表格中的某一行复选框时,更新该行的 selected
属性,使用table的select。
2. 借助表格的三个事件,回调函数的selection会记住当前勾选的行。
本篇是根据第二种方法实现的。
实现效果
最终实现的效果如下:
1.多页下勾选,第一页勾选3条,第二页勾选2条,返回第一条,依旧显示勾选的3条
2.单页全选和取消全选
3.手动取消勾选后,本页的全选(表头那里)的中间状态被取消——借助element-plus直接实现了,如果是手写的话需要考虑这个问题,同样的如果需要是实现全选所有的功能,也需要考虑这步。
4.全选全部(最难的部分)——这里是通过全选所有后,禁用表格的勾选框和隐藏表头的勾选框,给接口传一个标志全选的参数来实现这个功能的 ,最简单粗暴的方式。(如果是按钮代表勾选则不用考虑这些)
当然【全选所有】这个功能如果真正实现,需要考虑很多交互,在后面说具体方式。
详细开发
先建一个文件,index.vue
1.模拟数据和页面布局
全部代码
<template>
<el-card class="card-style">
<div class="mt-1">
<h2 class="fwb-mb-1">批量全选功能</h2>
</div>
<el-row style="margin: 10px 0">
<el-col :span="12">
<el-checkbox v-model="checkAll" @change="checkAllChange">全选所有</el-checkbox>
</el-col>
</el-row>
<el-table
ref="tableRef"
:data="tableData.slice((params.page - 1) * params.pageSize, params.page * params.pageSize)"
class="table-small-custom"
:row-key="(row) => row.id"
height="calc(100vh - 271px)"
@select="selectChange"
@select-all="selectAllChange"
@selection-change="handleSelectionChange"
>
<!-- :header-cell-class-name="leftHeaderStyle" -->
<!-- :selectable="handleSelectable" -->
<el-table-column type="selection" width="30" :reserve-selection="true" />
<el-table-column type="index" width="70" label="序号" align="center">
<template #default="scope">
<span v-text="getIndex(scope.$index)"></span>
</template>
</el-table-column>
<el-table-column prop="id" label="id" min-width="160" align="center"></el-table-column>
</el-table>
<el-pagination
v-model:current-page="params.page"
v-model:page-size="params.pageSize"
class="pg-block"
layout="total, sizes, prev, pager, next, jumper"
:total="pageTotal"
:page-sizes="['3', '5']"
background
small
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</el-card>
</template>
<script setup>
import { ref, reactive, defineProps, computed, defineEmits, onMounted, inject } from 'vue'
import axios from '@/utils/request.js'
import { ElMessage, ElMessageBox } from 'element-plus'
let tableData = ref([])
let pageTotal = ref(0)
let params = reactive({
page: 1,
pageSize: 3
})
onMounted(async () => {
getListData()
})
const getListData = async () => {
//接口数据
tableData.value = [{ id: 12 }, { id: 13 }, { id: 14 }, { id: 15 }, { id: 16 }, { id: 17 }, { id: 18 }]
pageTotal.value = tableData.value.length
}
const checkAll = ref(false)
const checked = ref([])
const handleSelectable = (row, index) => {
return !checkAll.value
}
const selectAllChange = (selection) => {
console.log('表头全选', selection)
//处理数据
//。。。
}
const selectChange = (selection, row) => {
console.log('勾选', selection, row)
//处理数据
//。。。
}
const handleSelectionChange = (selection) => {
//处理数据
//。。。
checked.value = selection.map((item) => item.id)
}
const leftHeaderStyle = ({ row, column, rowIndex, columnIndex }) => {
if (rowIndex == 0 && columnIndex === 0 && checkAll.value) {
return 'selectAllBtnDis'
}
}
// 为下面全选所有功能
const tableRef = ref(null)
const checkAllChange = (val) => {
//全选
if (val) {
tableRef.value.clearSelection()
tableRef.value.toggleAllSelection()
}
}
const getIndex = (index) => {
return (params.page - 1) * params.pageSize + index + 1
}
const handleSizeChange = (val) => {
params.page = 1
params.pageSize = val
getListData()
}
const handleCurrentChange = (val) => {
params.page = val
getListData()
}
</script>
<style lang="scss" scoped>
:deep(.selectAllBtnDis .cell) {
visibility: hidden;
}
</style>
这里tableData虽然模拟的是前端分页,但是和后端分页效果一样,勾选功能同样适应
2.跨页勾选和点击勾选功能
element-plus已经支持跨页勾选了,只需要这两个属性:
:row-key="(row) => row.id"
:reserve-selection="true"
实现效果就如 【实现效果】里第一条。
3.表头全选
const selectAllChange = (selection) => {
console.log('表头全选', selection)
//处理数据
//。。。
}
这里可以处理需要用的数据,当然 手动勾选的时候也要处理数据(selectChange),并且根据打印参数的顺序,如果调用表格的 toggleAllSelection方法来全选表格,selectChange里也会处理顺序,所以,在这一步处理数据是最好的。
关于表格的toggleAllSelection,是用于切换表格的全选和全不选,所以一个表格多次调用就会出现先全选再全不选。之前写翻页默认全选的功能时,用了这个方法,发现有个bug,就是前面那种情况,所以后来 改成了——foreach表格数据然后toggleRowSelection,效果一样。
还有如果翻页默认全选,那么可以先用clearSelection,再toggleAllSelection。
4. 全选全部
(1)全选后禁用表格勾选(简单)
这种就是通过全选后,禁用表格的勾选,借助:selectable="handleSelectable" ,如果全选了,则表格不能勾选。
<el-table-column type="selection" width="30" :reserve-selection="true" :selectable="handleSelectable" />
const handleSelectable = (row, index) => {
return !checkAll.value
}
并且表头不能被勾选,也就是本页全选,有几种实现方式,要么表头的勾选禁用,要么是表头的勾选隐藏掉,禁用这个应该能实现,但是没有找到方法 ,因为数据为空时,表头就是禁用的:
所以我只好隐藏表头的勾选框:
通过给table加了一个表头的样式 :header-cell-class-name="leftHeaderStyle"
const leftHeaderStyle = ({ row, column, rowIndex, columnIndex }) => {
if (rowIndex == 0 && columnIndex === 0 && checkAllPatient.value) {
return 'selectAllBtnDis'
}
}
:deep(.selectAllBtnDis .cell) {
visibility: hidden;
}
实现效果:
(2)真正意义上的全选全部(难)
如果要实现真正意义的全选所有,也就是跨页全选,有两种前提:
第一种是前端分页的背景下,直接全选所有后,直接给所有数据加一个selected的属性,或者,已勾选的数据里是全部数据,翻页的时候,遍历当页数据,然后toggleRowSelection。
第二种是后端分页情景下的全选所有。
那么前端无法获取全部数据,自然也翻页后无法知道当前选中哪些,是否全选了,虽然element-plus已经支持记住勾选的数据的功能,但是也很实现这个交互,需要考虑以下几个问题:
- 全选所有后,当前checkbox是√形式,这种
,并且当页的表格被勾选,这个简单,借助【先用clearSelection,再toggleAllSelection】就可以实现。
- 全选所有后,翻页默认全选,则,翻页的时候需要调用一下上面那一步。
- 以上两步,都需要记住数据,无所谓,反正handleSelectionChange时会处理数据
- 全选所有后取消全选,那么就需要clearSelection,翻页时也需要。
- 全选全部后,取消勾选某一个行或者点表头来取消当页勾选,那么【全选全部】 的checkbox是-的方式
,代表已经全选过,但是当前用户手动取消掉一些。那么实现这个功能,则需要考虑,怎么传递数据
- 比如在第一页全选所有了,那么后面十几页都是被勾选的 ,如果你没有翻页,自然无法获取后面 的数据,传参时如果需要实现上面这个功能,可以和后端沟通,全选时传一个标志,然后再取消勾选时,记住当前取消勾选的数据,传给后端,他们处理数据时就【全部数据-被取消勾选的数据】,这种方式比较便捷
- 上面时在勾选全部的基础上的一些交互和数据处理,如果是用户手动勾选/手动全选本页,一共十三条数据,全部勾选了,那么【全选全部】被勾选,这个好实现,只需要对比seleced数据的长度和total就行,之后再取消就也跟上面逻辑一样。
以上差不多是实现的主要难点,目前我查找解决方案,也大多是给这种方式,如果有其他方式,可以在评论区告知。
(3)补充一种全选,全不选的功能实现方式
(2024年1月,添加)
这里需要实现一个表格和【全选】【全不选】,以及导出的功能,在上面提到一个勾选回显的功能基础上,实现以上的功能,其实比较简单。
三部分:
1.勾选后,翻页能回显已勾选的数据,这个功能上面提到了怎么实现了
2.全选,点击这个按钮,每次翻页时,自动去勾选表单,表面上变成全选。右上角的已选变成总数,点击导出时,就导出所有数据
3.全不选,点击这个按钮了,取消勾选表单,清空已选数据
具体的代码如下:
/**
* 点击【全选】按钮
* isSelectAll
* 实现的功能:点击这个按钮了,每次翻页时,自动去勾选表单,表面上变成全选。右上角的已选变成总数,点击导出时,就导出所有数据
*/
const selectAll = () => {
isSelectAll.value = true
selectOrNotSelectData()
}
/**
* 点击【全不选】按钮
* isNotSelectAll
* 实现的功能:点击这个按钮了,取消勾选表单,清空已选数据
*/
const notSelectAll = () => {
isNotSelectAll.value = true
isSelectAll.value = false
selectedData.value = []
selectionTableRef.value.clearSelection()
}
const selectOrNotSelectData = () => {
const isDataSelected = selectedData.value?.some((selectedItem) => {
// 假设每个数据有一个唯一的标识符,比如 primary_key.value
return tableData.value.some((tableItem) => tableItem[primary_key.value] === selectedItem[primary_key.value])
})
if (isSelectAll.value) {
console.log('全选', selectedData.value)
if (isDataSelected) {
selectionTableRef.value.clearSelection()
selectionTableRef.value.toggleAllSelection()
} else {
selectionTableRef.value.toggleAllSelection()
}
}
}
其中最重要的应该是selectOrNotSelectData(),每次获取数据时,去调一下这个方法,如果点击了全选按钮就去处理一下数据,如果当前页之前有勾选数据,则清空,然后再全选。这个方法是我试过比较方便的能实现以上功能。欢迎补充新的。
总结
这个功能,需要考虑很多交互的逻辑,因为我写的是【全选全部】是一个checkbox的勾选框,所以要考虑取消勾选的功能,自然就有了上面真正实现时的难点。但是如果这个功能是通过一个按钮控制的,点击按钮就代表全选所有操作,那么自然不用考虑取消勾选和禁用的逻辑,因为全选所有时,就已经走完批量全选的流程了。两种实现方式根据业务具体的调整,这次也是为了记录实现这个功能时遇到的问题和思考。文章来源:https://www.toymoban.com/news/detail-733972.html
关于最后阐述的【全选全部】功能的难点,确实我现阶段没有好的实现方式,只想到那一种,如果有其他的方式,评论区可以指导一下,感谢~文章来源地址https://www.toymoban.com/news/detail-733972.html
到了这里,关于vue3+element-plus 表格全选和跨页勾选,以及全选全部功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!