在vue和element-ui的table中实现分页复选功能


Posted in Javascript onDecember 04, 2019

背景

后台管理系统中,使用表格展示数据时,可能的需求是多项选择然后进行批量操作,也期望能翻页多选。

实现

在vue和element-ui的table中实现分页复选功能 

页面结构如下

<el-table
 class="table"
 :data="tableData"
 border
 style="width: 100%"
 @selection-change="handleSelectionChange"
 ref="asTable"
>
 <el-table-column
 width="50"
 type="selection"
 fixed="left"
 >
 </el-table-column>
 <el-table-column
 prop="id"
 label="ID"
 >
 </el-table-column>
 <el-table-column
 prop="name"
 label="名字"
 >
 </el-table-column>

 <el-table-column
 label="操作"
 width="100"
 >
 <template slot-scope="scope">
  <el-button type="primary" plain size="small" @click="handleEdit(scope.row)" >编辑</el-button>
 </template>
 </el-table-column>
</el-table>
<el-pagination
 background
 @current-change="handleCurrentChange"
 :current-page.sync="pagination.currentPage"
 :page-size="pagination.size"
 layout="total, prev, pager, next, jumper"
 :total="pagination.total"
 slot="pagination"
>
</el-pagination>

模拟数据实现分页

data () {
 return {
 tableData: [],
 multipleSelection: [],
 pagination: {
  currentPage: 1,
  size: 10,
  total: 1000
 }
 }
},
beforeMount () {
 this.fetchData()
},
methods: {
 fetchData () {
 this.tableData = []
 let start = (this.pagination.currentPage - 1) * this.pagination.size
 let end = this.pagination.currentPage * this.pagination.size
 setTimeout(_ => {
  for (let i = start; i < end; i++) {
  this.tableData.push({
   id: i,
   name: `王${i}兰`
  })
  }
 }
 },
 handleCurrentChange () {
 this.fetchData()
 },
 handleSelectionChange (val) {
 this.multipleSelection = val
 },
}

展示已选择项

<div class="result">
 已选:{{ allMultipleSelection }}
</div>
allMultipleSelection: [],

在复选事件中对所选项进行存储

主要思路就是:

  • 将当前页已选数据放入所有已选项
  • 将所有已选项数据中当前页没选择的项移除
handleSelectionChange (val) {
 this.multipleSelection = val
 // @tip 实现分页复选
 console.log(val, 'selection')
 setTimeout(_ => {
 this.resolveAllSelection()
 }, 50)
},
resolveAllSelection () {
 let currentPageData = this.tableData.map(item => item[this.uniqueKey]) // 当前页所有数据
 let currentPageSelected = this.multipleSelection.map(item => item[this.uniqueKey]) // 当前页已选数据
 let currentPageNotSelected = currentPageData.filter(item => !currentPageSelected.includes(item)) // 当前页未选数据
 // 将当前页已选数据放入所有已选项
 currentPageSelected.forEach(item => {
 if (!this.allMultipleSelection.includes(item)) {
  this.allMultipleSelection.push(item)
 }
 })
 // 将所有已选项数据中当前页没选择的项移除
 currentPageNotSelected.forEach(item => {
 let idx = this.allMultipleSelection.indexOf(item)
 if (idx > -1) {
  this.allMultipleSelection.splice(idx, 1)
 }
 })
 console.log(this.allMultipleSelection, 'all')
},

此时还需要在切换页面时将之间选择项进行重新选中,即遍历当前页所有数据如果存在于所有已选项中,则将其置为已选择。

fetchData () {
 // ...
 setTimeout(_ => {
 // ...
 // @tip 实现分页复选
 setTimeout(_ => {
  this.setSelectedRow()
 }, 50)
 }, 200)
},
setSelectedRow () {
 // 设置当前页已选项
 this.tableData.forEach(item => {
 if (this.allMultipleSelection.includes(item[this.uniqueKey])) {
  this.$refs.asTable.toggleRowSelection(item, true)
  console.log(item[this.uniqueKey], 'set')
 }
 })
},

在vue和element-ui的table中实现分页复选功能 

以上实现了分页复选功能。

所有代码存放在 @careteen/lan-vue

查看DEMO

clone仓库并引入依赖

git clone git@github.com:careteenL/lan-vue.git
npm install
npm run serve

浏览器打开 http://localhost:8080/#/examples/pagingCheck 即可看到效果

总结

以上所述是小编给大家介绍的在vue和element-ui的table中实现分页复选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
vue项目中极验验证的使用代码示例
Dec 03 #Javascript
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
JS实现的雪花飘落特效示例
Dec 03 #Javascript
vue中实现高德定位功能
Dec 03 #Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 #Javascript
js实现时分秒倒计时
Dec 03 #Javascript
Vue实现验证码功能
Dec 03 #Javascript
You might like
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
js字符编码函数区别分析
2008/06/05 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python中的五种异常处理机制介绍
2014/09/02 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
Python运算符+与+=的方法实例
2021/02/18 Python
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
配件采购员岗位职责
2013/12/03 职场文书
总经理岗位职责范本
2014/02/02 职场文书
房产转让协议书
2014/04/11 职场文书
社区活动总结报告
2014/05/05 职场文书
某某同志考察材料
2014/05/28 职场文书
2015年维修工作总结
2015/04/25 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL