数据量庞大的分页穿梭框实现

博客地址：https://ainyi.com/63

昨天偶然看到评论区一位老哥的需求，一时兴起，就答应了当天写好源码写个博客

回来的晚，第二天才写好。。

写个分页的穿梭框，从而解决数据量庞大的问题

我之前写过一篇博客：关于 Element 组件的穿梭框的重构 介绍并实现的方法

但是第二个分页的 demo 没有，在上一家公司匆匆解决后，没有写入自己的 GitHub，有点可惜...

当时可是在上班，而且太忙了，不过既然答应了这位老哥写个 demo，就要做到，也是给自己一个挑战

进入正题

看实现效果图

既然之前博客谈过，这里就不仔细谈了，主要放主要的源码

问题

Element 官方组件目前（==18年==）明显对于多选==三级联动的穿梭框==没有解决方案，也对==数据量庞大的穿梭框==没有结局方案（各位看官可以试一下，放入几千条数据到穿梭框，卡到爆...），遂只能自己重写组件，完成业务需求

功能

实现分页

搜索，做成在所有数据里搜索，不是在当前分页的数据里搜索，这样就不用在每个分页都搜索一次了。搜索后的结果也会自动分页。（全部数据和仅作展示的数据存都是存放在不同变量）

全选只在当前页里的全选

穿梭框左右两个框的联动

关键点

每个框作为一个子组件（组件化思想）

分页关键判断临界点

搜索，监听 keyword 的变化，传递到父组件搜索，从全局数据搜索

把备选的数据当做已选的过滤数组，把已选的数据当做备选的过滤数组，在全局 data 进行过滤，最后再进行一次搜索（备选、已选）（考虑到是在搜索过后点击的）

中间的左右箭头（加入已选和移除已选）放在父组件控制数据流动

数据流动：子备选框 -> 父组件 -> 子已选框 （移除已选相反）

源码

Districts.vue（包裹两个穿梭框的父组件）

export default {props: {data: {type: Array,},},data () {return {dataList: [], // 未选中（已过滤出已选)的数据selectList: [], // 已选中的数据，传递到子组件的数据dataListNoCheck: [], // 未选中的（或已搜索）传递到子组件的数据selectListCheck: [], // 已选中的（或已搜索）传递到子组件的数据checkData: [], // 已勾选的数据（待添加或删除数据)noSelectkeyword: '',haSelectkeyword: '',disablePre: true,disableNex: true,};},created () {this.getDistrict();},methods: {// 分页数据getDistrict () {this.dataList = this.data;this.dataListNoCheck = this.dataList;},searchWord (keyword, titleId) {// 过滤掉数据，保留搜索的数据if (titleId === 0) {this.noSelectkeyword = keyword;this.dataListNoCheck = this.dataList.filter(val => val.name.includes(keyword));} else {this.haSelectkeyword = keyword;this.selectListCheck = this.selectList.filter(val => val.name.includes(keyword));}let refsName = titleId === 0 ? 'noSelect' : 'hasSelect';// 延迟执行setTimeout(() => {this.$refs[refsName].getDistrict();}, 0);},// 检查左右按钮可用性checkDisable (data, id) {if (id === 0) {data.length > 0 ? (this.disableNex = false) : (this.disableNex = true);} else {data.length > 0 ? (this.disablePre = false) : (this.disablePre = true);}},// 选择checkSelect (val) {this.checkData = val;},// 关键：把未选择的数据当做已选择的过滤数组，把已选择的数据当做未选择的过滤数组，在全局data进行过滤，最后进行一次搜索// 添加至已选addData () {let dataFilter = [...this.selectList,...this.checkData,];this.dataList = this.data.filter(item1 => {return dataFilter.every(item2 => item2 !== item1);});this.selectList = this.data.filter(item1 => {return this.dataList.every(item2 => item2 !== item1);});// 搜索一次this.searchWord(this.noSelectkeyword, 0);this.searchWord(this.haSelectkeyword, 1);},// 从已选中删除deleteData () {let dataFilter = [...this.dataList,...this.checkData,];this.selectList = this.data.filter(item1 => {return dataFilter.every(item2 => item2 !== item1);});this.dataList = this.data.filter(item1 => {return this.selectList.every(item2 => item2 !== item1);});// 搜索一次this.searchWord(this.noSelectkeyword, 0);this.searchWord(this.haSelectkeyword, 1);},},components: {Transfer,}, }; </script>

Transfer.vue（穿梭框子组件）

export default {props: {titleId: {type: Number,},districtList: { // 父组件传递的数据type: Array,},},data () {return {title: ['渠道', '已选中'],districtListMock: [], // 展示的数据 （搜索和分页会自动修改这个数组）checkedCities: [], // 已选择，数据格式：[id,id,id...]isIndeterminate: false,checkAll: false,searchWord: '',len: 0,total: 0,pageIndex: 0,disabledPre: true,disabledNex: false,};},created () {this.getDistrict();},watch: {// 搜索框的监听器searchWord (newWord) {this.$emit('search-word', newWord, this.titleId);},// districtListMock 和 checkAll 的监听器districtListMock () {// 当方框中无已选择的数据时，不能勾选checkBoxif (this.checkedCities.length === 0) {this.checkAll = false;this.isIndeterminate = false;}},checkedCities (newWord) {this.$emit('check-disable', newWord, this.titleId);},// 当列表中无数据时，不能勾选checkBoxcheckAll () {this.checkAll = this.districtListMock.length === 0 ? false : this.checkAll;},},methods: {// 分页数据getDistrict () {this.len = this.districtList.length;this.total = Math.ceil(this.len / 200);this.pageIndex = 0;this.pageData();},pageData () {this.checkedCities = [];if (this.total > 1 && this.pageIndex < (this.total - 1)) {this.pageIndex === 0 ? this.disabledPre = true : this.disabledPre = false;this.disabledNex = false;this.districtListMock = this.districtList.slice(this.pageIndex \\* 200, this.pageIndex \\* 200 + 200);} else {this.total > 1 ? this.disabledPre = false : this.disabledPre = true;this.disabledNex = true;this.districtListMock = this.districtList.slice(this.pageIndex \\* 200, this.len);}},// 上一页prev () {this.pageIndex > 0 && --this.pageIndex;this.pageData();},// 下一页next () {this.pageIndex <= (this.total - 1) && ++this.pageIndex;this.pageData();},// 单选handleCheckedChange (value) {let checkedCount = value.length;this.checkAll = checkedCount === this.districtListMock.length;this.isIndeterminate = checkedCount > 0 && checkedCount < this.districtListMock.length;// 子传父this.$emit('check-district', value);},// 全选handleCheckAllChange (val) {this.checkedCities = val ? this.districtListMock.map(val => val) : [];this.isIndeterminate = false;// 子传父this.$emit('check-district', this.checkedCities);},}, }; </script>

具体源码可前往 Github：https://github.com/Krryxa/my-transfer

欢迎 start

呼呼，双休好好休息了~~

博客地址：https://ainyi.com/63

转载于:https://www.cnblogs.com/ainyi/p/10125443.html

总结

以上是生活随笔为你收集整理的数据量庞大的分页穿梭框实现的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。