vue-transfer-three 三栏穿梭框

transferThree component ,the components is based on ElementUI's transfer component, it has three transfer

该三栏穿梭框是基于element中的transfer穿梭框实现的，目前如果需要使用该组件需要引入elementui框架，后续会抽离出来使其不安装element也能使用。也会继续优化该插件的。

Build Setup

# if you need to use this component，your vue project must install ElementUI and use it
npm i element-ui -S

# use it in your project,for example

  import transferThree from 'vue-transfer-three/packages/transferThree'
  export default {
    components: {
      transferThree
    }
  }

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------------------- | ---------------------- | -------------------------------- | --- | ------------------------ | | data | 中间Transfer的数据源 | array[{ key, label, disabled }] | — | [ ] | | leftData | 左边Transfer的数据源 | array[{ key, label, disabled }] | — | [ ] | | rightData | 右边Transfer的数据源 | array[{ key, label, disabled }] | — | [ ] | | titles | 自定义列表标题 | array | — | ['列表 1', '列表 2'，'列表 3'] | | left-default-checked | 初始状态下左侧列表的已勾选项的 key 数组 | array | — | [ ] | | source-default-checked | 初始状态下中间列表的已勾选项的 key 数组 | array | — | [ ] | | right-default-checked | 初始状态下右侧列表的已勾选项的 key 数组 | array | — | [ ] | | filterable | 是否可搜索 | boolean | — | false | | filter-placeholder | 搜索框占位符 | string | — | 请输入搜索内容 | | filter-method | 自定义搜索方法 | function | — | — | | render-content | 自定义数据项渲染函数 | function(h, option) | — | — |

Slot

| name | 说明 | | ------------- | --------- | | left-footer | 左侧列表底部的内容 | | source-footer | 中间列表底部的内容 | | right-footer | 右侧列表底部的内容 |

Methods

| 方法名 | 说明 | 参数 | | ---------- | ------------ | ------------------------------------ | | clearQuery | 清空某个面板的搜索关键词 | 'left' / 'middle' /'right'，指定需要清空的面板 |

Events

| 事件名称 | 说明 | 回调参数 | | ------------------- | --------------------- | ------------------------------------------ | | change | 列表元素发生变化时触发 | 数据移动的方向、发生移动的数据key数组 、左侧数据列表、中间数据列表、右边数据列表 | | left-check-change | 左侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 | | middle-check-change | 中间列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 | | right-check-change | 右侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |