第一步:介绍table自带的两个属性
element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动

element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动
这两个属性配合使用,可以保留上一页选中的数据
element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动
element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动
element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动

第二步:将选中的数据放到一个SelectData中,包括数据所在的页数、数据在所在页的index下角标和需要显示在页面上的数据字段,这里是pubnumber.
思路:选中的数据要考虑是单个选中还是全选
单个选中:在选中事件中,先将选中的数据放到tags中,利用val.length大小,将数据放到SelectData中,注意不可重复放置。(val指选中的数据)
element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动
全选:全选时会触发事件,在这个事件中使用一个boolean数据记录是否为全选,选择时要先删除数据再添加全部数据(避免重复),若有取消选择按钮,则点击时清空数据就可以了
element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动
清空数据
element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动
第三步:数据联动 需要保证选中的数据与显示的tag标签保持一致
a情况:关闭选中则tag自动消失,这个组件可以自己实现
b情况:关闭tag标签则选中消失。
思路:当前页联动、跨页联动
当前页联动
关闭tag时触发事件,首先删除tag,要看下删除的tag是否是当前页的数据,是的话,控制选中状态,并从SelectData中删除。
不是的话,就改变SelectData中此条数据的状态,已备切换到这一页时再删除。

element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动
跨页联动
思路就是切换页时,遍历SelectData,当SelectData中的数据的page字段是否是当前页的页码(就是看这套数据是不是属于当前页),并且选中状态为false,是的话,将此条数据的选中状态改为非选中
element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动
需要注意的问题:
a:注意this.nextTick(()=>使bgetTableListthis.tableDatathis.nextTick(() =>{} 的使用 b:注意在getTableList 方法中,不同位置this.tableData和this.refs.multipleTable.data的数据不同
element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动

相关文章: