第一步:介绍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.refs.multipleTable.data的数据不同