在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 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
简单实现js倒计时功能
Feb 13 Javascript
js Dom实现换肤效果
Oct 21 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
Javascript实现简易天数计算器
May 18 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
PHP5 安装方法
2007/01/15 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
Vue组件选项props实例详解
2017/08/18 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
Python下载指定页面上图片的方法
2016/05/12 Python
python3 爬取图片的实例代码
2018/11/06 Python
Python面向对象进阶学习
2019/05/21 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python序列类型的打包和解包实例
2019/12/21 Python
python基于openpyxl生成excel文件
2020/12/23 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
上海期货面试题
2014/01/31 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
爽歪歪广告词
2014/03/20 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
小升初自荐信范文
2015/03/05 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
DQL数据查询语句使用示例
2022/12/24 MySQL