table切换数据 vue_使用vue+iview table组件做翻页保存数据功能

前端程序媛小伙伴们大家好，今天给大家分享一个表格翻页保存数据的功能。马上2020年了，如果你还不会用vue，那么可能真的out了，大家赶紧学起来吧，虽然组件库只是一个工具，但是我们在使用的过程中也会遇到这样或者那样的问题。今天我来替大家干掉一个大坑。

不知道你有没有这样的时候，当我们遇到组件没有满足你当前开发场景时，就会心里万马奔腾，不免会埋怨，这组件也太难用了，连这么简单的功能都没有。

小编作为一名前端开发工程师，今天来给大家分享下翻页保存数据的步骤：

1.设置表格多选的功能

通过给 columns数据设置一项，指定 type: 'selection'，即可自动开启多选功能。

2.了解如果设置默认选中项

给 data 项设置特殊 key _checked: true可以默认选中当前项。

3.了解选中的相关事件

4.明确我们的思路

iview并没有提供翻页选中数据的功能，我们需要自己做。思路如下：

保存所有选中项(最终需要的数据)保存当前页选中项保存其他页面选中项保存当前页所有选项保存所有选中项 = 当前页选中项+其他页选中项

其他页选中项 = 所有选中项-当前页选中项

因为在分页的切换中，选项改变时候只能获取当前页面选中项，所以我们需要实时更新当前页的选中数据，每次触发选择最终的选中项为当前页面选中项+所有选中项-当前页面的选中项。

下面我们看具体代码实现：

在data中保存一个最终选中项的数组curPageSelected: [] // 存放当前页选中项

2.在computed属性中存一个存放当前页所有数据的计算属性

在每次表格绑定的data变化时，计算属性会随之更新。

curPageAllIds () { // 存放当前页所有数据

return this.tableData.map((item) => item.serviceId)

}

3.在当前表格页选项改变事件触发时候更新最终选中值

获取当前选中项

获取其他页选项，为上一次最终选择项减去当前页所有数据的值

最新一次最终选择项为，当前页选中项加上其他页选中项

selectService (selection) {

this.curPageSelected = selection.map((item) => item.serviceId)

// otherPageIds其他页面选中项 为所有选中项减去当前页所有数据

let otherPageIds = this._.without(this.formValidate.serviceIdList, ...this.curPageAllIds)

// 最终选择项为

this.formValidate.serviceIdList = this._.union(otherPageIds, this.curPageSelected)

}

如果最终需要的数据不光是id的话就不需要.map处理了，而且需要将otherPageIds改为这样：

let otherPageIds = this.formValidate.serviceIdList.filter((item)=>!this.curPageAllIds.includes(item.serviceId))

最大的坑还是因为on-selection-change事件只能返回选中项目，不能保存失去选中项的数据。不然不必如此大费周章。

template模板如下：

光看是不会有多大的体会的，我们要实践起来。当真正遇到的时候，就会乱投医了，所以平时还是多加练习吧！

知了知了知道的又多了点吧！每天学一点，生活赛神仙！有疑问欢迎私聊知了程序媛。