tree transfer
1.0.0
el-tree-fransfer is a tree shuttle box component based on VUE and element-ui. Please make sure you have introduced element-ui before using it! The function of this component is similar to the transfer component of element-ui , but the data inside is a tree structure! In fact, the element-ui components that el-tree-transfer relies on are Checkbox, Button, and the main Tree tree control! It is not an extension of element-ui's shuttle box component, but merely refers to its appearance, style and functionality.
Because the company's business uses the Vue framework, the UI library uses element-ui. It is difficult to find a useful Vue tree shuttle box component on the market, and we don’t want to introduce other heavyweight plug-ins outside of element-ui just because of a shuttle box, so there is el-tree-transfer. Lightweight, easy to use, no additional learning costs required.
2.4.6 Fix the reconstruction error (please do not use 2.4.0-2.4.5); add three modes that are not related to father and son (including the authorization mode); adjust the component directory structure; reconstruct the shuttle algorithm, and the performance of the rough test of demo data is greatly improved. ;Optimize the selection of all when the parent and child are not related; modify The event addBtn is add-btn, and removeBtn is remove-btn; add drag and drop; add custom node slot; fix the data disappearing after selecting the left and right shuttle twice at the same time; add clearing to the search box; add parent-child non-associated shuttle function
2.3.3 Modify shuttle matching logic; add rootPidValue parameter. See the release notes below for detailed instructions
First npm download the plug-in
npm install el-tree-transfer --save
or
npm i el-tree-transfer -S
Then you can use el-tree-transfer like a normal component
< template >
< div >
// 你的代码
...
// 使用树形穿梭框组件
< tree-transfer : title = " title " :from_data='fromData' :to_data='toData' :defaultProps=" { label: 'label' } " @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
</ tree - transfer >
< / div >
</ template >
< script >
import treeTransfer from 'el-tree-transfer' // 引入
export defult {
data ( ) {
return : {
mode : "transfer" , // transfer addressList
fromData : [
{
id : "1" ,
pid : 0 ,
label : "一级 1" ,
children : [
{
id : "1-1" ,
pid : "1" ,
label : "二级 1-1" ,
disabled : true ,
children : [ ]
} ,
{
id : "1-2" ,
pid : "1" ,
label : "二级 1-2" ,
children : [
{
id : "1-2-1" ,
pid : "1-2" ,
children : [ ] ,
label : "二级 1-2-1"
} ,
{
id : "1-2-2" ,
pid : "1-2" ,
children : [ ] ,
label : "二级 1-2-2"
}
]
}
]
} ,
] ,
toData : [ ]
}
} ,
methods: {
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode ( ) {
if ( this . mode == "transfer" ) {
this . mode = "addressList" ;
} else {
this . mode = "transfer" ;
}
} ,
// 监听穿梭框组件添加
add ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
} ,
// 监听穿梭框组件移除
remove ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
}
} ,
components : { treeTransfer } // 注册
}
</ script >
< style >
...
</ style > | serial number | parameter | illustrate | type | default value | Replenish |
|---|---|---|---|---|---|
| 1 | width | width | String | 100% | It is recommended to set the width and position of the outer box |
| 2 | height | high | String | 320px | - |
| 3 | title | title | String | ["source list", "target list"] | - |
| 4 | button_text | button name | Array | - | - |
| 5 | from_data | source data | Array | - | The data format is the same as the element-ui tree component, but must have id and pid |
| 6 | to_data | target data | Array | - | The data format is the same as the element-ui tree component, but must have id and pid |
| 7 | defaultProps | Configuration items - same as props in el-tree | Object | { label: "label", children: "children", isLeaf: "leaf", disable: "disable" } | The usage is the same as el-tree props |
| 8 | node_key | Customize the value of node-key, the default is id | String | ID | It must be consistent with the id parameter name in the treedata data and must be unique. |
| 9 | pid | Customize the parameter name of pid, the default is "pid" | String | pid | Some netizens suggested that the field name given by the background is not called pid, so custom support is added. |
| 10 | leafOnly | abandoned | - | - | - |
| 11 | filter | Whether to enable filtering function | Boolean | false | Filter based on the label field of the defaultProps parameter |
| 12 | openAll | Whether to expand all by default | Boolean | false | There is a performance issue |
| 13 | Custom tree node, usage is the same as element-ui tree | Function | - | Version 2.2.3 is split into two functions to define custom nodes on the left and right sides respectively. | |
| 14 | mode | Set shuttle box mode | String | transfer | The mode defaults to transfer mode, which is the tree shuttle mode. The configurable field is addressList and can be changed to address book mode. In address book mode, the name of the button cannot be customized. If you want to customize the title name, just pass in four values in the title array. , in addressList mode, the title defaults to address book, recipient, carbon copy person, and blind carbon copy person. |
| 15 | transferOpenNode | Whether to expand the shuttle nodes after shuttle | Boolean | true | The default is true, which means that the shuttle node will be expanded for visual inspection. This parameter is added because there will be obvious lag problems in expansion when the amount of data is large. However, note that if this parameter is set to false, it will not be expanded after shuttle. After all, it is impossible to determine which layer it is. There will be huge data |
| 16 | defaultCheckedKeys | Node selected by default | Array | false | Only matches the initial default node and will not dynamically change the default node after you operate it. |
| 17 | placeholder | Set search box prompts | String | Enter keywords to filter | - |
| 18 | defaultTransfer | Whether to automatically shuttle once to the node with defaultCheckedKeys selected by default | Boolean | false | Used to meet the needs of users who do not want to split the data into fromData and toData. |
| 19 | arrayToTree | Whether to enable the conversion of one-dimensional arrays into tree structures | Boolean | false | The data must have a root node and not be broken. For details on the data format, see app.vue on github. According to the corresponding relationship between id and pid, there are certain performance issues when converting. |
| 20 | addressOptions | Address book mode configuration items | Object | {num: Number, suffix: String, connector: String} | num-> The number of required address books on the right side, the default is 3 suffix-> The field you want to splice after the label (such as id, that is, take the id of this data and splice it at the back). The default is suffix connector -> connector (string) default- |
| twenty one | lazy | Whether to enable lazy loading | Boolean | false | The effect is el-tree lazy loading and cannot be used at the same time as openAll or default expansion. |
| twenty two | lazyFn | Lazy loading callback function | Function | - | When lazy is used, the callback function must be passed in, example: lazyFn='loadNode', return parameter loadNode(node, resolve, from), node->currently expanded node node, resolve->lazy loading resolve, from -> left/right Indicates that the callback is coming from the left/right side |
| twenty three | high-light | Whether to highlight the currently selected node | Boolean | false | - |
| twenty four | filterNode | Custom search function | Function | - | If not passed, the default will still be filtered based on the label field of the defaultProps parameter. |
| 25 | defaultExpandedKeys | Expand nodes by default | Array | - | The node id array to be expanded will be automatically deduplicated on the left and right sides. |
| 26 | lazyRight | In version 2.2.9, the lazy attribute only takes effect on the left side of the tree. If you need the right side, use lazy loading -> lazyRight. | Boolean | - | - |
| 27 | sjr | Address book mode, set the recipient data on the right | Array | - | - |
| 28 | csr | Address book mode, set the carbon copy person data on the right | Array | - | - |
| 29 | msr | Address book mode, set the blind copy person data on the right | Array | - | - |
| 30 | rootPidValue | Shuttle box mode, the value of the root node data pid, used to match the exit loop, important | String,Number | 0 | - |
| 31 | checkStrictly | Whether father and son are not related | Boolean | false | This mode does not support lazy. The returned fromData and toData are the latest data, and the keys and nodes in obj are incomplete. And there are differences in the processing logic for the left and right sides of the parent node after deleting the child node: since it will appear on the right when authorizing, the left parent node must be required, and when deleting authorization, removing the child permissions does not mean that you want to remove the parent permissions. |
| 32 | renderAfterExpand | Whether to render child nodes after a tree node is expanded for the first time | Boolean | true | - |
| 33 | expandOnClickNode | Whether to expand or shrink nodes when clicking on them | Boolean | true | - |
| 34 | checkOnClickNode | Whether to select the node when clicking on it | Boolean | false | - |
| 35 | indent | Horizontal indent between adjacent level nodes, in pixels | Number | 16 | - |
| 36 | icon-class | Customize icons for tree nodes | String | - | - |
| 37 | draggable | Whether to enable the drag-and-drop node function | Boolean | false | - |
| 38 | allow-drag | Determine whether the node can be dragged | Function(node) | - | - |
| 39 | allow-drop | Determine whether the target node can be placed when dragging | Function(draggingNode, dropNode, type) | - | The type parameter has three situations: 'prev', 'inner' and 'next', which respectively means placing before the target node, inserting into the target node and placing after the target node. |
| 40 | checkStrictlyType | There are three modes that are not related to father and son: authorization mode, puppet mode and modular building block mode. | String | authorization: Selecting a child node on the left will automatically bring the parent node; selecting a parent node on the right will automatically bring the child node; the same non-leaf node may exist on both sides of this mode; puppet: Pure parent-child shuttle is not associated, but the complete tree must be maintained shape structure, it automatically brings only the necessary parts for shuttle to the opposite side for splicing. Skeleton structure; the same non-leaf nodes may exist on both sides of this mode; modular pure parent-child does not associate shuttle, and does not maintain a complete tree structure. Like building blocks, to form a tree shape on the right side, the left side needs to be dismantled, and the left side needs to be dismantled. The more on the right side, the more complete the tree structure is; the left and right sides of this pattern ensure strict uniqueness |
| serial number | event name | illustrate | callback parameters |
|---|---|---|---|
| 1 | add-btn | Event triggered when the add button is clicked (addBtn before 2.4.0) | function(fromData,toData,obj), the tree shuttle box transfer modes are 1. Left data after movement, 2. Right data after movement, 3. Moved node keys, nodes, halfKeys, halfNodes objects; address book addressList In mode, the return parameters are the right recipient list, the right carbon copy list, and the right blind carbon copy list. |
| 2 | remove-btn | Event triggered when the remove button is clicked (removeBtn before 2.4.0) | function(fromData,toData,obj), the tree shuttle box transfer modes are 1. Left data after movement, 2. Right data after movement, 3. Moved node keys, nodes, halfKeys, halfNodes objects; address book addressList In mode, the return parameters are the right recipient list, the right carbon copy list, and the right blind carbon copy list. |
| 3 | left-check-change | Left source data check event | function(nodeObj, treeObj, checkAll) see the el-tree component check event return value, the new checkAll parameter indicates whether all are selected |
| 4 | right-check-change | Right target data check event | function(nodeObj, treeObj, checkAll) see the el-tree component check event return value, the new checkAll parameter indicates whether all are selected |
| 5 | node-drag-start | Event triggered when a node starts dragging | There are 3 parameters in total, in order: "left"/"right", Node corresponding to the dragged node, and event |
| 6 | node-drag-enter | Events triggered when dragging into other nodes | There are 4 parameters in total, in order: "left"/"right", the Node corresponding to the dragged node, the Node corresponding to the entered node, and event |
| 7 | node-drag-leave | Event triggered when dragging away from a node | There are 4 parameters in total, in order: "left"/"right", the Node corresponding to the dragged node, the Node corresponding to the left node, and event |
| 8 | node-drag-over | An event triggered when a node is dragged (similar to the browser's mouseover event) | There are 4 parameters in total, in order: "left"/"right", the Node corresponding to the dragged node, the Node corresponding to the currently entered node, and event |
| 9 | node-drag-end | Event triggered when dragging ends (may not be successful) | There are 5 parameters in total, in order: "left"/"right", the Node corresponding to the dragged node, the last node entered when the drag is ended (may be empty), the placement position of the dragged node (before, after, inner), event |
| 10 | node-drop | Event triggered when dragging is successfully completed | There are 5 parameters in total, in order: "left"/"right", the Node corresponding to the dragged node, the last node entered when the drag is ended, the placement position of the dragged node (before, after, inner), event |
| serial number | name | illustrate |
|---|---|---|
| 1 | clearChecked | Clear the selected node, clear all by default type：string left左边right右边all全部默认all |
| 2 | getChecked | Get selected data |
| 3 | setChecked | Set selected data function(leftKeys = [], rightKeys = []) |
| 4 | clearFilter | Clear search box conditions, clear all functions by default (type: String) left, left, right, all, default all |
| serial number | name | illustrate |
|---|---|---|
| 1 | left-footer | The left and right bottom slots of the shuttle box |
| 2 | right-footer | The left and right bottom slots of the shuttle box |
| 3 | title-left | Custom content on the left and right sides of the shuttle box title area |
| 4 | title-right | Custom content on the left and right sides of the shuttle box title area |
| 5 | form | The upper slot of the left content area |
| 6 | to | The upper slot of the content area on the right |
| 7 | content-left | Customize left tree node |
| 8 | content-right | Customize the right tree node |
2.4.6 Fix the reconstruction error (please do not use 2.4.0-2.4.5); add three modes that are not related to father and son (including the authorization mode); adjust the component directory structure; reconstruct the shuttle algorithm, and the performance of the rough test of demo data is greatly improved. ;Optimize the selection of all when the parent and child are not related; modify The event addBtn is add-btn, and removeBtn is remove-btn; add drag and drop; add custom node slot; fix the data disappearing after selecting the left and right shuttle twice at the same time; add clearing to the search box; add parent-child non-associated shuttle function
2.3.3 Change the algorithm for judging whether the shuttle target already exists on the opposite side to avoid unexpected matching results of the original str regular expression (for example, both the children and list fields have this id. After the shuttle is removed, the data in children is gone, and the data in list is gone. The data is still there, at this time the original matching logic will still ignore the shuttle when the task target already exists on the opposite side); add
rootPidValuefield, and no longer force the pid of the root node to be changed to 0
2.3.2 Optimize address book mode
2.3.1 Move the outer layer’s css settings for el-tree into the inner layer to eliminate the impact of canceling css scoped in 2.3.0
2.3.0 Cancel css scoped
In version 2.2.9, the lazy attribute only takes effect on the left side of the tree. If you need the right side, use lazy loading -> lazyRight.
2.2.8 Optimize the use of defaultCheckedKeys and defaultTransfer together, which triggers the problem of adding events. Usually the default first shuttle is that the background is lazy and does not generate two data fromData and toData. It needs to be split by the front end. At this time, it is necessary to trigger the adding event again. ; Alternatively, instead of using defaultTransfer, you can manually call the addToAims(false) function after defaultCheckedKeys changes. If the parameter is passed false, the emit callback will not be triggered.
2.2.6 Add
clearCheckedmethod to clear selected nodes
2.2.5 Add parameter
defaultExpandedKeysto expand nodes by default
2.2.3 Split the custom tree node function
参数13 renderContentisrenderContentLeft,renderContentRightrespectively define custom node functions on the left and right sides; addfilterNodefunction to customize the search
2.2.2 Add selected highlighting parameters
2.2.1 Add the select all event at title. For detailed parameter description, see
事件3，事件4
2.2.0 Added lazy loading function (non-address book mode). For detailed parameter description, see
参数21, 参数22
2.1.2 Added configurable items for address book mode, but as a non-main maintenance mode, the flexibility is still low. For detailed parameter description, see
参数20
2.1.1 Fixed the shuttle error when selecting the root node in array mode, discarded the
leafOnlyparameter, and be careful not to use the arrayToTree parameter if it is already a tree structure.
2.1.0 Added the arrayTotree parameter to automatically convert a one-dimensional array into the required tree structure (see parameter 19, or github-app.vue for details); fixed the problem of remaining half-selected nodes after shuttle; removed some unnecessary variables
2.0.2 Add title header slot custom content area
2.0.1 Fixed the problem of parent-child disconnection.
Version 2.0.0 adds data check events on the left and right sides of the shuttle box, and bottom slots on the left and right sides of the shuttle box.
Version 1.9.8 fixes the error reporting of custom button
button_text.
Version 1.9.7 adds the
defaultTransferattribute to meet the needs of users who do not want to split data into fromData and toData, and adds theplaceholderattribute.
1.9.0 Enhance the regular matching strength when the id contains both numbers and characters.
Version 1.8.9 fixes the duplication error caused by shuttle when a node is both a branch node on one side and a leaf node on the other side! Resolve invalid filter error when customizing node names.
Version 1.8.8 adds
transferOpenNodeparameter to manage whether to expand nodes after shuttle, anddefaultCheckedKeysis used to set the initial default expansion of nodes.
Version 1.8.7 adds address book mode, which can be configured through the mode field. The optional value of the mode field is
transfer|addressList.
Version 1.7.7 adjusts the parameters of
addBtnandremoveBtnevents, returning three parameters. The first parameter is the moved fromData data, the second parameter is the moved toData data, and the third parameter is {keys, nodes, harfKeys, harfNodes} object. AddedrenderContentparameter to support tree node customization.
Version 1.6.7 adds
filter,openAllparameters to set whether to enable filtering and whether to expand all by default.
Version 1.5.9 adds the
leafOnlyparameter to set whether to return only the end leaf nodes of the tree.
Version 1.5.8 restores the code for returning
nodesthat was inexplicably deleted in the previous version. If your project only needs shuttle node-key values, there is no need to update! apologizing. . .
Version 1.5.7 fixes the problem that the asynchronous data of subcomponents is sometimes not updated! Fixed an error when customizing the parameter name node_key, children, automatically replacing the pid of the first layer of data with 0
Version 1.4.9 adds callback parameters for adding and removing buttons. The first parameter of function(keys,nodes) is the node-key value of the selected node, and the second parameter is the selected node node.
Version 1.4.8 fixes the problem that the id cannot pass the repeated verification function when it is of type number, but it is still recommended to use string type for id.
Version 1.4.7 adds
defaultPropsparameter,node_keyparameter, andpidparameter. The main function is to customize some important field names to improve data flexibility and avoid being sacrificed to the background because of different field names.
Version 1.3.7 cancels the dependence on the loadsh library. Previously, this library was only used for some deep copy processing.
Parameters: width Description:宽度type: String Required: false Default: 100% Supplement:建议在外部盒子设定宽度和位置
Parameters: height Description:高度type: String Required: false Default: 320px
Parameters: title Description:标题type: Array Required: false Default: ["源列表", "目标列表"]
Parameters: button_text Description:按钮名字type: Array Required: false Default:空
Parameters: from_data Description:源数据type: Array Required: true Supplement:数据格式同element-ui tree组件，但必须有id和pid
Parameters: to_data Description:目标数据type: Array Required: true Supplement:数据格式同element-ui tree组件，但必须有id和pid
Parameters: defaultProps Description:配置项-同el-tree中props Required: false Supplement:用法和el-tree的props一样
Parameters: node_key description:自定义node-key的值，默认为id : false Supplement:必须与treedata数据内的id参数名一致，必须唯一
Parameters: pid Description:自定义pid的参数名，默认为"pid" Required: false Supplement:有网友提出后台给的字段名不叫pid，因此增加自定义支持
--(obsolete) Not recommended! Parameters: leafOnly Description:是否只返回叶子节点Type: Boolean Required: false Supplement:默认false，如果你只需要返回的末端子节点可使用此参数
Parameters: filter description:是否开启筛选功能Type: Boolean Required: false
Parameters: openAll Description:是否默认展开全部: Boolean Required: false
Parameters: renderContent Description:自定义树节点type: Function Required: false Supplement:用法同element-ui tree
Parameters: mode description:设置模式，字段可选值为transfer|addressList Type: String Required: false Supplement: mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
Parameters: transferOpenNode Description:穿梭后是否展开穿梭的节点: Boolean Required: false Supplement:默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据
Parameters: defaultCheckedKeys Description:默认展开节点type: Array Required: false Supplement:只匹配初始时默认节点，不会在你操作后动态改变默认节点
Parameters: placeholder Description:设置搜索框提示语type: String Required: false Supplement:默认为请输入关键词进行筛选
Parameters: defaultTransfer description:是否自动穿梭一次默认选中defaultCheckedKeys的节点: Boolean . Required: false Supplement: The默认false，用来满足用户不想将数据拆分成fromData和toData的需求
Parameters: arrayToTree Description:是否开启一维数组转化为树形结构Type: Boolean Required: false Supplement:数据必须存在根节点，并且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在一定的性能问题
Parameters: addressOptions Description:通讯录模式配置项{num: Number, suffix: String, connector: String} Type: Object Required: false Supplement: num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默认suffix connector -> 连接符（字符串）默认-
Parameters: lazy Description:是否启用懒加载Type: Boolean Required: false Supplement:默认false，效果动el-tree懒加载，不可和openAll或默认展开同时使用
Parameters: lazyFn Description:懒加载的回调函数type: Function Required: true Supplement:当适用lazy时必须传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node，resolve->懒加载resolve，from -> left|right 表示回调来自左侧|右侧
Event: addBtn Description:点击添加按钮时触发的事件: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
Event: removeBtn Description:点击移除按钮时触发的事件: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
Event: left-check-change Description:左侧源数据勾选事件callback parameters: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
Event: right-check-change Description:右侧目标数据勾选事件callback parameters: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值，新增第三个参数表示是否全部选中
Slot: left-footer , right-footer Description:穿梭框左侧、右侧底部slot
Slot: title-left , title-right Description:穿梭框标题区左侧、右侧自定义内容
