在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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 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
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
javascript常用函数(1)
2015/11/04 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
JS实现简单日历特效
2020/01/03 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python随机取list中的元素方法
2018/04/08 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python实现超市商品销售管理系统
2019/11/22 Python
三个python爬虫项目实例代码
2019/12/28 Python
django ORM之values和annotate使用详解
2020/05/19 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
关于爱国的演讲稿
2014/05/07 职场文书
卖房协议书样本
2014/10/30 职场文书
医院党建工作总结2015
2015/05/26 职场文书
汽车车尾标语大全
2015/08/11 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server