在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 相关文章推荐
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
vue-router 控制路由权限的实现
Sep 24 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
jquery简单体验
2007/01/10 Javascript
Javascript 获取LI里的内容
2008/12/17 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
教你使用python画一朵花送女朋友
2018/03/29 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
浅谈python锁与死锁问题
2020/08/14 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
教师申诉制度
2014/01/29 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
小学安全教育主题班会
2015/08/12 职场文书
网络研修心得体会
2016/01/08 职场文书