el-tree-transfer

el-tree-transfer 是基于 Element UI 的树形穿梭框组件，其 API 如下： ### el-tree-transfer Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|-------|-------| | data | 显示的数据 | Array | — | [] | | props | 配置选项，具体看下表 | Object | — | — | | filterable | 是否可搜索 | Boolean | — | false | | filterPlaceholder | 搜索框占位符 | String | — | 输入关键字进行过滤 | | filterMethod | 自定义搜索方法 | Function | — | — | | titles | 标题数组，顺序从左至右 | Array | — | ['源列表', '目标列表'] | | buttonTexts | 按钮文本数组，顺序从上至下 | Array | — | [] | | renderContent | 插槽，暂不支持 | Function | — | — | | value | 绑定值，选中项的 key 数组 | Array | — | [] | | format | 格式化选项，具体看下表 | Object | — | — | | leftDefaultChecked | 初始状态下左侧选中的值的数组 | Array | — | [] | | rightDefaultChecked | 初始状态下右侧选中的值的数组 | Array | — | [] | ### el-tree-transfer Props - props | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|-------|-------| | label | 指定节点标签为节点对象的某个属性值 | String | — | label | | children | 指定子树为节点对象的某个属性值 | String | — | children | | disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | Boolean | — | disabled | ### el-tree-transfer Props - format | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|-------|-------| | to | `el-transfer` 中的 `format` 属性值，表示数据从源列表转移到目标列表时，被转移数据的格式化方法 | Function | — | — | | from | `el-transfer` 中的 `format` 属性值，表示数据从目标列表转移到源列表时，被转移数据的格式化方法 | Function | — | — | ### el-tree-transfer Events | 事件名称 | 说明 | 回调参数 | |--------|--------|--------| | change | 选项在两栏之间转移时触发 | 左侧选中项的 key 数组，右侧选中项的 key 数组，左侧列表，右侧列表 | ### el-tree-transfer Methods | 方法名 | 说明 | 参数 | |------|------|------| | getLeftCheckedNodes | 获取左侧被选中的节点数据 | — | | getRightCheckedNodes | 获取右侧被选中的节点数据 | — | | getLeftCheckedKeys | 获取左侧被选中节点的 key 值 | — | | getRightCheckedKeys | 获取右侧被选中节点的 key 值 | — | | clearQuery | 清空搜索框内容 | — |

el-tree-transfer的默认使用方式是通过在需要的文件中引入el-tree-transfer插件，并结合element-ui来实现树形穿梭框。首先需要在项目中安装element-ui和el-tree-transfer插件。你可以通过以下的命令来安装插件： ``` npm install element-ui --save npm install el-tree-transfer --save ``` 然后在需要使用el-tree-transfer的文件中引入el-tree-transfer插件，例如： ``` import treeTransfer from "el-tree-transfer"; ``` 这样就可以在文件中使用el-tree-transfer来实现树形穿梭框，并且可以自定义图标等功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [el-tree-transfer自定义节点图标](https://blog.csdn.net/weixin_45493439/article/details/121603183)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Vue el-tree与el-transfer的结合使用之el-tree-transfer](https://blog.csdn.net/qq_35713827/article/details/97109216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]