Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
el-tree-transfer
Advanced tools
el-tree-transfer - npm Package Compare versions
Comparing version 2.4.0 to 2.4.1
| { | ||
| "name": "el-tree-transfer", | ||
| "version": "2.4.0", | ||
| "version": "2.4.1", | ||
| "description": "A tree shaped shuttle box assembly based on Vue and element-ui 一个基于vue.js和element-ui的树形穿梭框，也可用于邮件通讯录", | ||
@@ -5,0 +5,0 @@ "main": "dist/treeTransfer.min.js", |
@@ -11,5 +11,8 @@ # el-tree-transfer | ||
| ### [文档地址](http://docs.wlui.com.cn/) - [GitHub](https://github.com/wl-ui/wlui) | ||
| ### [在线访问](http://wlui.com.cn/) - [GitHub](https://github.com/hql7/tree-transfer) - [NPM](https://www.npmjs.com/package/el-tree-transfer) - [SegmentFault](https://segmentfault.com/a/1190000015553081) - [CSDN](https://blog.csdn.net/qq_15390381/article/details/80943549)- [掘金](https://juejin.im/post/5b3ecae8e51d4519213fae4b) | ||
| ### [文档地址](http://docs.wlui.com.cn/) - [在线访问](http://wlui.com.cn/) - [GitHub](https://github.com/hql7/tree-transfer) - [掘金](https://juejin.im/post/5b3ecae8e51d4519213fae4b) | ||
| ### 重要更新 | ||
| > 2.4.1 修改事件addBtn为add-btn，removeBtn为remove-btn；增加拖拽；增加自定义节点slot；修复左右同时选中穿梭两次后的数据消失；搜索框增加清空； | ||
| > 2.4.0 增加父子不关联穿梭功能 | ||
| > 2.3.3 修改穿梭匹配逻辑；增加rootPidValue参数。详细说明见下方版本说明 | ||
@@ -35,3 +38,3 @@ | ||
| // 使用树形穿梭框组件 | ||
| <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @addBtn='add' @removeBtn='remove' :mode='mode' height='540px' filter openAll> | ||
| <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> | ||
@@ -122,36 +125,43 @@ </div> | ||
| ## 文档 | ||
| | 序号 | 参数 | 说明 | 类型 | 必填 | 可选值 | 默认值 | 补充 | | ||
| | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | | ||
| | 1 | width | 宽度 | String | false | - | 100% | 建议在外部盒子设定宽度和位置| | ||
| | 2 | height | 高度 | String | false | - | 320px | - | | ||
| | 3 | title | 标题 | String | false | - | ["源列表", "目标列表"] | - | | ||
| | 4 | button_text | 按钮名字 | Array | false | - | - | - | | ||
| | 5 | from_data | 源数据 | Array | true | - | - | 数据格式同element-ui tree组件，但必须有id和pid | | ||
| | 6 | to_data | 目标数据 | Array | true | - | - | 数据格式同element-ui tree组件，但必须有id和pid | | ||
| | 7 | defaultProps | 配置项-同el-tree中props | Object | false | - | { label: "label", children: "children", isLeaf: "leaf", disable: "disable" } | 用法和el-tree的props一样 | | ||
| | 8 | node_key | 自定义node-key的值，默认为id | String | false | - | id | 必须与treedata数据内的id参数名一致，必须唯一 | | ||
| | 9 | pid | 自定义pid的参数名，默认为"pid" | String | false | - | pid | 有网友提出后台给的字段名不叫pid，因此增加自定义支持 | | ||
| | 10 | leafOnly | 废弃 | - | - | - | - | - | | ||
| | 11 | filter | 是否开启筛选功能 | Boolean | false| - | false | 根据defaultProps参数的label字段筛选 | | ||
| | 12 | openAll | 是否默认展开全部 | Boolean | false | - | false | 存在性能问题 | | ||
| | 13 | ~~renderContent~~ renderContentLeft, renderContentRight | 自定义树节点， 用法同element-ui tree | Function | false | - | - | 2.2.3版本拆为两个函数分别定义左右两侧自定义节点 | | ||
| | 14 | mode | 设置穿梭框模式 | String | false | transfer/addressList | transfer | mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人 | | ||
| | 15 | transferOpenNode | 穿梭后是否展开穿梭的节点 | Boolean | false | - | true | 默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据 | | ||
| | 16 | defaultCheckedKeys | 默认选中节点 | Array | false | - | - | 只匹配初始时默认节点，不会在你操作后动态改变默认节点 | | ||
| | 17 | placeholder | 设置搜索框提示语 | String | false | - | 输入关键词进行筛选 | - | | ||
| | 18 | defaultTransfer | 是否自动穿梭一次默认选中defaultCheckedKeys的节点 | Boolean | false | - | false | 用来满足用户不想将数据拆分成fromData和toData的需求 | | ||
| | 19 | arrayToTree | 是否开启一维数组转化为树形结构 | Boolean | false | - | false | 数据必须存在根节点，并且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在一定的性能问题 | | ||
| | 20 | addressOptions | 通讯录模式配置项 | Object | false | - | {num: Number, suffix: String, connector: String} | num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默认suffix connector -> 连接符（字符串）默认- | | ||
| | 21 | lazy | 是否启用懒加载 | Boolean | false | - | false | 效果动el-tree懒加载，不可和openAll或默认展开同时使用 | | ||
| | 22 | lazyFn | 懒加载的回调函数 | Function | true | - | - | 当适用lazy时必须传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node，resolve->懒加载resolve，from -> left/right 表示回调来自左侧/右侧 | | ||
| | 23 | high-light | 是否高亮当前选中节点| Boolean | false | - | false | - | | ||
| | 24 | filterNode | 自定义搜索函数 | Function | false | - | - | 不传则仍默认根据defaultProps参数的label字段筛选 | | ||
| | 25 | defaultExpandedKeys | 默认展开节点 | Array | false | - | - | 要展开的节点id数组，会自动去重生效在左右两侧 | | ||
| | 序号 | 参数 | 说明 | 类型 | 默认值 | 补充 | | ||
| | ---- | ---- | ---- | ---- | ---- | ---- | | ||
| | 1 | width | 宽度 | String | 100% | 建议在外部盒子设定宽度和位置| | ||
| | 2 | height | 高度 | String | 320px | - | | ||
| | 3 | title | 标题 | String | ["源列表", "目标列表"] | - | | ||
| | 4 | button_text | 按钮名字 | Array | - | - | | ||
| | 5 | from_data | 源数据 | Array | - | 数据格式同element-ui tree组件，但必须有id和pid | | ||
| | 6 | to_data | 目标数据 | Array | - | 数据格式同element-ui tree组件，但必须有id和pid | | ||
| | 7 | defaultProps | 配置项-同el-tree中props | Object | { label: "label", children: "children", isLeaf: "leaf", disable: "disable" } | 用法和el-tree的props一样 | | ||
| | 8 | node_key | 自定义node-key的值，默认为id | String | id | 必须与treedata数据内的id参数名一致，必须唯一 | | ||
| | 9 | pid | 自定义pid的参数名，默认为"pid" | String | pid | 有网友提出后台给的字段名不叫pid，因此增加自定义支持 | | ||
| | 10 | leafOnly | 废弃 | - | - | - | | ||
| | 11 | filter | 是否开启筛选功能 | Boolean | false | 根据defaultProps参数的label字段筛选 | | ||
| | 12 | openAll | 是否默认展开全部 | Boolean | false | 存在性能问题 | | ||
| | 13 | ~~renderContent~~ renderContentLeft, renderContentRight | 自定义树节点， 用法同element-ui tree | Function | - | 2.2.3版本拆为两个函数分别定义左右两侧自定义节点 | | ||
| | 14 | mode | 设置穿梭框模式 | String | transfer | mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人 | | ||
| | 15 | transferOpenNode | 穿梭后是否展开穿梭的节点 | Boolean | true | 默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据 | | ||
| | 16 | defaultCheckedKeys | 默认选中节点 | Array | false | 只匹配初始时默认节点，不会在你操作后动态改变默认节点 | | ||
| | 17 | placeholder | 设置搜索框提示语 | String | 输入关键词进行筛选 | - | | ||
| | 18 | defaultTransfer | 是否自动穿梭一次默认选中defaultCheckedKeys的节点 | Boolean | false | 用来满足用户不想将数据拆分成fromData和toData的需求 | | ||
| | 19 | arrayToTree | 是否开启一维数组转化为树形结构 | Boolean | false | 数据必须存在根节点，并且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在一定的性能问题 | | ||
| | 20 | addressOptions | 通讯录模式配置项 | Object | {num: Number, suffix: String, connector: String} | num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默认suffix connector -> 连接符（字符串）默认- | | ||
| | 21 | lazy | 是否启用懒加载 | Boolean | false | 效果动el-tree懒加载，不可和openAll或默认展开同时使用 | | ||
| | 22 | lazyFn | 懒加载的回调函数 | Function | - | 当适用lazy时必须传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node，resolve->懒加载resolve，from -> left/right 表示回调来自左侧/右侧 | | ||
| | 23 | high-light | 是否高亮当前选中节点| Boolean | false | - | | ||
| | 24 | filterNode | 自定义搜索函数 | Function | - | 不传则仍默认根据defaultProps参数的label字段筛选 | | ||
| | 25 | defaultExpandedKeys | 默认展开节点 | Array | - | 要展开的节点id数组，会自动去重生效在左右两侧 | | ||
| | 26 | lazyRight | 2.2.9 版本lazy属性只对左侧树生效，如果需要右侧也是用懒加载->lazyRight | Boolean | - | - | - | | ||
| | 27 | sjr | 通讯录模式，设置右侧收件人数据 | Array | false | - | - | - | | ||
| | 28 | csr | 通讯录模式，设置右侧抄送人数据 | Array | false | - | - | - | | ||
| | 29 | msr | 通讯录模式，设置右侧密送人数据 | Array | false | - | - | - | | ||
| | 27 | sjr | 通讯录模式，设置右侧收件人数据 | Array | - | - | | ||
| | 28 | csr | 通讯录模式，设置右侧抄送人数据 | Array | - | - | | ||
| | 29 | msr | 通讯录模式，设置右侧密送人数据 | Array | - | - | | ||
| | 30 | rootPidValue | 穿梭框模式，根节点数据pid的值，用于匹配退出循环，重要 | String,Number | 0 | - | - | 插件不再强制将你的数据根节点pid都改为0 | | ||
| | 31 | checkStrictly | 是否父子不关联 | Boolean | false | - | false | 此模式不支持lazy，返回的fromData和toData是最新数据，obj里面的keys，nodes不完整。且对删空子节点后的父节点左右两边处理逻辑有差异：当授权时既然要在右边出现，必然需要左侧父节点，而删除授权时，移除子权限并不代表想移除父权限 | | ||
| | 31 | checkStrictly | 是否父子不关联 | Boolean | false | 此模式不支持lazy，返回的fromData和toData是最新数据，obj里面的keys，nodes不完整。且对删空子节点后的父节点左右两边处理逻辑有差异：当授权时既然要在右边出现，必然需要左侧父节点，而删除授权时，移除子权限并不代表想移除父权限 | | ||
| | 32 | renderAfterExpand | 是否在第一次展开某个树节点后才渲染其子节点 | Boolean | true | - | | ||
| | 33 | expandOnClickNode | 是否在点击节点的时候展开或者收缩节点 | Boolean | true | - | | ||
| | 34 | checkOnClickNode | 是否在点击节点的时候选中节点 | Boolean | false | - | | ||
| | 35 | indent | 相邻级节点间的水平缩进，单位为像素 | Number | 16 | - | | ||
| | 36 | icon-class | 自定义树节点的图标 | String | - | - | | ||
| | 37 | draggable | 是否开启拖拽节点功能 | Boolean | false | - | | ||
| | 38 | allow-drag | 判断节点能否被拖拽 | Function(node) | - | - | | ||
| | 39 | allow-drop | 拖拽时判定目标节点能否被放置 | Function(draggingNode, dropNode, type) | - | type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | | ||
@@ -164,6 +174,12 @@ > ----------------------------------------------------------- | ||
| | ---- | ---- | ---- | ---- | | ||
| | 1 | addBtn | 点击添加按钮时触发的事件 | unction(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表 | | ||
| | 2 | removeBtn | 点击移除按钮时触发的事件 | function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表 | | ||
| | 1 | add-btn | 点击添加按钮时触发的事件(2.4.0以前为addBtn) | function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表 | | ||
| | 2 | remove-btn | 点击移除按钮时触发的事件(2.4.0以前为removeBtn) | function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表 | | ||
| | 3 | left-check-change | 左侧源数据勾选事件 | function(nodeObj, treeObj, checkAll)见el-tree组件check事件返回值, 新增checkAll参数表示是否全部选中 | | ||
| | 4 | right-check-change | 右侧目标数据勾选事件 | function(nodeObj, treeObj, checkAll)见el-tree组件check事件返回值, 新增checkAll参数表示是否全部选中 | | ||
| | 5 | node-drag-start | 节点开始拖拽时触发的事件 | 共3个参数，依次为："left"/"right"、被拖拽节点对应的 Node、event | | ||
| | 6 | node-drag-enter | 拖拽进入其他节点时触发的事件 | 共4个参数，依次为："left"/"right"、被拖拽节点对应的 Node、所进入节点对应的 Node、event | | ||
| | 7 | node-drag-leave | 拖拽离开某个节点时触发的事件 | 共4个参数，依次为："left"/"right"、被拖拽节点对应的 Node、所离开节点对应的 Node、event | | ||
| | 8 | node-drag-over | 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） | 共4个参数，依次为："left"/"right"、被拖拽节点对应的 Node、当前进入节点对应的 Node、event | | ||
| | 9 | node-drag-end | 拖拽结束时（可能未成功）触发的事件 | 共5个参数，依次为："left"/"right"、被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event | | ||
| | 10 | node-drop | 拖拽成功完成时触发的事件 | 共5个参数，依次为："left"/"right"、被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event | | ||
@@ -177,2 +193,4 @@ > -------------------------------------------------------- | ||
| | 1 | clearChecked | 清除选中节点，默认清除全部 `type：string left左边 right右边 all全部 默认all` | | ||
| | 2 | getChecked | 获取选中数据 | | ||
| | 3 | setChecked | 设置选中数据 function(leftKeys = [], rightKeys = []) | | ||
@@ -191,2 +209,4 @@ > -------------------------------------------------------- | ||
| | 6 | to | 右侧内容区上部slot | | ||
| | 7 | content-left | 自定义左侧树节点 | | ||
| | 8 | content-right | 自定义右侧树节点 | | ||
@@ -196,2 +216,4 @@ | ||
| > 2.4.0 增加父子不关联逻辑 | ||
| > 2.3.3 更改判断穿梭目标是否已在对面存在的算法，避免原来str正则意外匹配结果（如children和list两个字段里都有这个id，穿梭移除后，children里的数据没了，list里面数据还在，此时原来的匹配逻辑仍会任务目标已在对面存在而忽略穿梭）；增加`rootPidValue`字段，不再强制将根节点的pid都改为0 | ||
@@ -198,0 +220,0 @@ |
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.46%
101519
- Number of lines in readme file
- increased by6.9%
341
No dependency changes