element表格跨页全选实现
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
一.思路
先声明一下,我的这个跨页全选是根据前端静态分页实现的
思路:添加一个全选按钮,全选后,选中所有数据。这里要实现两个操作,一个是element显示选中所有的项(包括分页的),二是将选中的项存储起来,方便发送数据到后端,再次全选后,取消所有选中。然后是实现,点击单条数据,选中状态需要切换。
二.实现具体过程
1.全选按钮功能(需要在element表格勾选所有,难点是分页的要勾上;并用一个数组存储全选数组)
<el-button type="primary" @click="selectAll(tableList)">全选</el-button>
这里的tableList是所有的表格数据,传进去的目的是为了跨页全选钩上,注意element官方文档的toggleAllSelection全选只能选择当前页的全选,要用toggleRowSelection,通过传入所有的表格行数据,遍历勾上。下面的webTableRef是为了操作封装的表格。同时加个selectFlag用来判断选中切换与否。
//存储表格选中的数据
const selectTaskList = ref([])
//是否全选标志,ture为全选中
//定义ref,获取子组件webTable的多选表格数据
const webTableRef = ref()
const selectFlag = ref(false)
const selectAll = (rows) => {
selectFlag.value = !selectFlag.value
rows.forEach((row) => {
webTableRef.value.multipleTableRef.toggleRowSelection(row, true)
})
selectTaskList.value = JSON.parse(JSON.stringify(tableList.value))
// true为选中, 0或false为取消选中
if (!selectFlag.value) {
//取消全选
webTableRef.value.multipleTableRef.clearSelection()
selectTaskList.value = []
}
}
2.使用reserve-selection让跨页选中状态保存
先设置rowKey
<el-table
@row-click="singleElection"
:row-key="getRowKeys"
>
const getRowKeys = (row) => {
// id 是后台传递的每行信息唯一标识
return row.id
}
然后配置reserve-selection
<el-table-column :type="selection" :reserve-selection="true" width="55" />
3.点击单项后改变选中状态
通过select方法中的selection判断是否选中(selection为空则取消了选中,row是选中或者选中都返回改行数据值),如果选中则把该行数组push进数组,否则删除。
<el-table
@select="judgeSelectTick"
>
const judgeSelectTick = (selection, row) => {
// true为选中, 0或false为取消选中
const selected = selection.length && selection.indexOf(row) !== -1
if (!selected) {
const res = selectTaskList.value.findIndex((item) => item.id === row.id)
selectTaskList.value.splice(res, 1)
} else {
selectTaskList.value.push(row)
}
}
3.操作完成后记得清空存储选中的数组
selectTaskList.value = []
三.补充一些细节
多选框全选按钮隐藏
::v-deep .el-table__header-wrapper .el-checkbox {
display: none;
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)