element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动

第一步：介绍table自带的两个属性

这两个属性配合使用，可以保留上一页选中的数据

第二步：将选中的数据放到一个SelectData中，包括数据所在的页数、数据在所在页的index下角标和需要显示在页面上的数据字段，这里是pubnumber.
思路：选中的数据要考虑是单个选中还是全选
单个选中：在选中事件中，先将选中的数据放到tags中，利用val.length大小，将数据放到SelectData中，注意不可重复放置。（val指选中的数据）

全选：全选时会触发事件，在这个事件中使用一个boolean数据记录是否为全选，选择时要先删除数据再添加全部数据（避免重复），若有取消选择按钮，则点击时清空数据就可以了

清空数据

第三步：数据联动需要保证选中的数据与显示的tag标签保持一致
a情况：关闭选中则tag自动消失，这个组件可以自己实现
b情况：关闭tag标签则选中消失。
思路：当前页联动、跨页联动
当前页联动：
关闭tag时触发事件，首先删除tag，要看下删除的tag是否是当前页的数据，是的话，控制选中状态，并从SelectData中删除。
不是的话，就改变SelectData中此条数据的状态，已备切换到这一页时再删除。

跨页联动
思路就是切换页时，遍历SelectData，当SelectData中的数据的page字段是否是当前页的页码(就是看这套数据是不是属于当前页)，并且选中状态为false，是的话，将此条数据的选中状态改为非选中

需要注意的问题：
a：注意this. n e x t T i c k ( ( ) = > 的使用 b ：注意在 g e t T a b l e L i s t 方法中，不同位置 t h i s . t a b l e D a t a 和 t h i s . nextTick(() =>{} 的使用 b：注意在getTableList 方法中，不同位置this.tableData和this. nextTick(()=>的使用b：注意在getTableList方法中，不同位置this.tableData和this.refs.multipleTable.data的数据不同

element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动相关推荐

element UI table合并行合并列(整理)
效果图1: 图一 <template><div class="container"><el-table :data="dataSource& ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
element ui table封装组件，render 函数动态事件设置
接着上一篇讲的,封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下,这样就可以定义化了,多数用于一些转换,或者操作列场景下,自行考虑即可,我 ...
如何设置element ui table的show-overflow-tooltip属性以及宽度
如何设置element ui table的show-overflow-tooltip属性以及宽度
element ui table表格轮播
element ui 用table表格示例不用添加任何语法,配上我下方的方法就没可以轻松实现表格轮播效果: 这个方法放在methods()方法里然后在mounted()中调用就可以了,注意我方法里ri ...

element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动

element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动相关推荐

最新文章

热门文章