博客地址：

基于 Element UI 的升级版穿梭框组件

  1. 多级多选穿梭框（常用于省市区三级联动）
  2. 针对数据量庞大的分页穿梭框

Example

kr-cascader

kr-paging

Specialty

kr-cascader 多级多选穿梭框

  1. 多级多选
  2. 当勾选省级并添加，过滤备选框的当前省级，同时在已选框该省级的子级合并成一个省级
  3. 当勾选市级并添加，过滤备选框的当前市级，同时在已选框该市级的子级合并成一个市级
  4. 当从已选框中移除数据，针对移除的数据是省、市、区分别在备选框新增这些数据
  5. 当父级勾选多个数据，下级方框展示的数据为最后勾选父级的子级集合
  6. 当多个勾选的父级逐个取消勾选，下级方框展示的数据为上一次勾选父级的子级集合
  7. 支持搜索

kr-paging 数据量庞大的分页穿梭框

  1. 实现分页
  2. 搜索，在所有数据里搜索（不是在当前分页的数据里搜索），这样就不用在每个分页都搜索一次；搜索后的结果也会自动分页
  3. 全选只在当前页里的全选
  4. 穿梭框左右两个框的联动

Install & Use

npm install krry-transfer --save

依赖 Element checkbox、button 组件和样式

import Vue from 'vue' import krryTransfer from 'krry-transfer'  Vue.use(krryTransfer)  /*   * or 按需引入  * import { krryCascader, krryPaging } from 'krry-transfer'  *  * Vue.use(krryCascader)  * Vue.use(krryPaging)  */

kr-cascader

<template>   <div>     <kr-cascader       :dataObj="dataObj"       :selectedData="selectedData"     ></kr-cascader>   </div> </template>  <script> export default {   data() {     return {       dataObj: {         province: {           '101103': '广东省',         },         city: {           '101103': [             {               id: 101164181112,               label: '深圳市'             }           ]         },         county: {           '101164181112': [             {               id: 106105142126,               label: '宝安区'             }           ]         }       },       selectedData: [         {           id: '101101-101101101112',           label: '北京市-通州区'         }       ]     }   } } </script>

kr-paging

<template>   <div>     <kr-paging       :dataList="dataList"       :selectedData="selectedData"       :pageSize="100"     ></kr-paging>   </div> </template>  <script> export default {   data() {     return {