Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor Tree component #464

Open
59 tasks done
Lydanne opened this issue Dec 12, 2020 · 0 comments
Open
59 tasks done

refactor Tree component #464

Lydanne opened this issue Dec 12, 2020 · 0 comments
Labels
refactor Refactor old code

Comments

@Lydanne
Copy link
Contributor

Lydanne commented Dec 12, 2020

Target

  • 完全兼容旧的属性、事件、方法
  • 添加新的API功能
  • 更高的性能追求
  • 添加useTree的方法

Tasking

  • 实现树形结构化数据进行显示以及动态更新
    • 基于v-model | v-model:data去展示树形结构的数据
    • 基于empty-text实现,在data为空的时候的文本提示
    • 基于node-key实现,标识每个TreeNode用来作为唯一标识的属性
    • 基于indent实现,实现节点缩进px
  • 实现节点的多选操作
    • 基于check-on-click-node实现,是否在点击节点的时候选中节点
    • 基于v-model:checked | default-checked-keys实现, 默认勾选的节点的 key 的数组
    • 基于show-checkbox实现,是否显示多选框
    • 基于check-strictly实现,在显示复选框的情况下,是否严格的遵循父子不互相关联的做法
    • 基于TreeNode.isDisabled实现,实现禁用选择
  • 实现展开折叠子元素
    • 基于 treeNode.expand() 实现简单的展开闭合子节点
    • 基于render-after-expand实现,是否在第一次展开TreeNode后渲染子组件
    • 基于default-expand-all实现,是否默认展开所有节点
    • 基于expand-on-click-node实现,是否在点击节点的时候展开或者收缩节点
    • 基于auto-expand-parent实现,是否在展开子节点的时候展开父节点
    • 基于v-model:expanded | default-expanded-keys实现默认展开的节点的key数组
  • 实现节点懒加载实现动态的加载显示
    • 基于async | lazy实现,是否懒加载子节点
    • 基于async-loader | load实现,异步加载子树数据的方法
  • 实现手风琴的显示效果
    • 基于accordion实现,是否每次只打开一个同级树节点展开
  • 实现节点的禁用隐藏的状态描述
    • 基于filter-node-method实现,对树节点进行筛选时执行的方法
  • 实现自定义节点内容
    • 基于render-content实现,树节点的内容区的渲染 Function
    • 基于icon-class实现,自定义树节点的图标
    • 基于#default插槽实现内容自定义
  • 实现拖拽的功能改变节点的结构关系
    • 基于draggable实现,是否开启拖拽节点功能
    • 基于allow-drag实现,判断节点是否可以被拖拽
    • 基于allow-drop,判断节点是否可以被放置
  • 实现为节点注入方法增删改查的功能
    • 基于TreeNode方法appendChild(node) 实现,为当前节点添加子节点
    • 基于TreeNode方法remove()实现, 删除当前节点
    • 基于TreeNode方法insertChild(index, node)实现,为当前节点的插入一个子元素,到 index 位置
    • 基于TreeNode方法removeChild(index)实现, 移除 index 位置的子元素
    • 基于TreeNode方法setChecked(value)实现,设置元素为选中状态,strictly 表示是否只选中当前节点
    • 基于TreeNode方法upwardEach(callback, opts)实现,从当前节点向上遍历树
    • 基于TreeNode方法depthEach(upToDownCallBack, downToUpCallBack)实现,从 当前节点向下遍历
    • 基于TreeNode方法findOne(target) 实现,查找当前当前子树的目标节点
    • 基于TreeNode方法findMany(label)实现,通过 label 查找节点
    • 基于TreeNode方法expand(value, ...extraNodes)实现,展开该节点,在展开的时候可以添加节点
    • 基于TreeNode方法show | hide实现, 设置当前节点是否可见
    • 基于TreeNode方法move(target, relative)实现,移动当前节点到目标节点的相对位置(上,内,下)
  • 实现对外提供的Tree方法和useTree方法
    • 基于updateKeyChildren方法, 通过 keys 设置节点子元素,使用此方法必须设置 node-key 属性
    • 基于getCheckedNodes方法,若节点可被选择(即 show-checkboxtrue),则返回目前被选中的节点所组成的数组
    • 基于filter方法,对树节点进行筛选操作
    • 基于getCheckedNodes方法,若节点可被选择(即 show-checkboxtrue),则返回目前被选中的节点所组成的数组
    • 基于setCheckedKeys方法,设置目前勾选的节点,使用此方法必须设置 node-key 属性
    • 基于getCheckedKeys方法, 若节点可被选择(即 show-checkboxtrue),则返回目前被选中的节点的 key 所组成的数组
    • 基于setChecked方法,通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性
    • 基于getHalfCheckedNodes方法,若节点可被选择(即 show-checkboxtrue),则返回目前半选中的节点所组成的数组
    • 基于getHalfCheckedKeys方法, 若节点可被选择(即 show-checkboxtrue),则返回目前半选中的节点的 key 所组成的数组
    • 基于getCurrentKey方法,获取当前被选中节点的 key,使用此方法必须设置 node-key 属性,若没有节点被选中则返回 null
    • 基于getCurrentNode方法,获取当前被选中节点的 data,若没有节点被选中则返回 null
    • 基于setCurrentKey方法,通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性
    • 基于setCurrentNode方法, 通过 node 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性
    • 基于getNode方法,根据 data 或者 key 拿到 Tree 组件中的 node
    • 基于remove方法,删除 Tree 中的一个节点,使用此方法必须设置 node-key 属性
    • 基于append方法, 为 Tree 中的一个节点追加一个子节点
    • 基于insertBefore方法,为 Tree 的一个节点的前面增加一个节点
    • 基于insertAfter方法,为 Tree 的一个节点的后面增加一个节点
  • 实现右击菜单事件
    • 菜单事件
  • 实现用户传入节点属性的key来适应用户的树结构数据
    • 基于default-node-key | props实现,TreeNode的默认字段key
  • 实现为当前选中的节点设置高亮
    • 基于highlight-current实现,是否高亮当前选中节点
    • 基于current-node-key实现,当前选中的节点
@cuixiaorui cuixiaorui changed the title refactor tree component refactor Tree component Dec 12, 2020
@cuixiaorui cuixiaorui added the refactor Refactor old code label Dec 12, 2020
Lydanne added a commit to hug-sun-1/element3 that referenced this issue Jan 15, 2021
refactor(tree): Realize tree structured data display and dynamic update hug-sun#464
Lydanne added a commit to hug-sun-1/element3 that referenced this issue Jan 30, 2021
refactor(Tree): 实现树形结构化数据进行显示以及动态更新 hug-sun#464
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
refactor Refactor old code
Projects
None yet
Development

No branches or pull requests

2 participants