element-ui transfer 组件源码分享

transfer 穿梭框组件源码简单分享，主要从以下几个方面：

1、transfer 组件页面结构。

2、transfer 组件属性。

3、transfer 组件方法。

4、transfer 组件事件。

5、transfer slot 挂载。

一、组件页面结构。

二、组件属性。

2.1 value / v-model 绑定值，类型 array，无默认值。

2.2 data 数据源，类型 array[{ key, label, disabled }]，默认 []。

2.3 filterable 是否可搜索，类型 boolean，默认 false。

2.4 filter-placeholder 搜索框占位符，类型 string，默认 ‘请输入搜索内容’。

2.5 filter-method 自定义搜索方法，类型 function，无默认值。

2.6 target-order 右侧列表元素的排序策略：若为 original，则保持与数据源相同的顺序；若为 push，则新加入的元素排在最后；若为 unshift，则新加入的元素排在最前，类型 string，可选值 original / push / unshift，默认值 original。

2.7 titles 自定义列表标题，类型 array，默认值 ['列表1','列表2']。

2.8 button-texts 自定义按钮文案，类型 array，默认值 []。

2.9 render-content 自定义数据项渲染函数，类型 function(h,option)，无默认值。

2.10 format 列表顶部勾选状态文案，类型 object{noChecked, hasChecked}，默认值 { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }。

2.11 props 数据源的字段别名，类型 object{key, label, disabled}，无默认值。

2.12 left-default-checked 初始状态下左侧列表的已勾选项的 key 数组，类型 array，默认值 []。

2.13 right-default-checked 初始状态下右侧列表的已勾选项的 key 数组，类型 array，默认值 []。

三、组件方法。

3.1 clearQuery 清空某个面板的搜索关键词，参数 left/right 指定需要清空的面板。

 

四、组件事件。

4.1 change 右侧列表元素变化时触发，回调参数 当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组。

4.2 left-check-chnge 左侧列表元素被用户选中 / 取消选中时触发，回调参数 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组。

4.3 right-check-change 右侧列表元素被用户选中 / 取消选中时触发，当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组。

五、组件 slot。

5.1 -- 自定义数据项的内容，参数为 { option }。

5.2 left-footer 左侧列表底部的内容。

5.3 right-footer 右侧列表底部的内容。