Transfer封装

近期项目中遇到穿梭框功能，将其过程做以总结:

效果图

效果预览

思路

1. 获取左侧勾选的值(checkedList)
2. 将checkedList循环一遍push进右侧(rightList)
3. 把leftList和rightList做一遍过滤遍历 使用filter和some函数来过滤去重 这样是为了避免已经添加到右侧之后左侧还有对应的城市

代码

item.vue

header里面可以放需要的查询条件

Transfer.vue

过滤函数

// 2个数组过滤重复数据
/**
*
* @param {Array} arr1 数组1
* @param {Array} arr2 数组2
* @param {String||Number} arr1key 数组1的key
* @param {String||Number} arr2key 数组2的key
* @returns Array
*/
export function filterData(arr1, arr2, arr1key, arr2key) {
  return arr1.filter(
    (item) => !arr2.some((ele) => ele[arr2key] === item[arr1key])
  )
}