refactor(tree): 树组件重构完成

This commit is contained in:
落小梅 2021-10-19 18:23:36 +08:00
parent 11dc8f1e21
commit ba784a3dff
5 changed files with 42 additions and 31 deletions

View File

@ -218,7 +218,7 @@ function handleClick(node) {
:::
| Name | Description | Accepted Values |
| -------- | ---- | ----------------------- |
| -------------------------------- | ---------------------------------------- | --------------- |
| data | 树型组件数据,类型 TreeData \| TreeData[] | null |
| showCheckbox | 是否显示复选框 | false |
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩 | false |
@ -236,11 +236,10 @@ function handleClick(node) {
| disabled | 该节点是否禁用 | false |
| spread | 该节点是否展开 | false | - |
::: field tree events
:::
| Name | Description | Accepted Params |
| -------- | ---- | ----------------------- |
| ---------- | --------------- | --------------- |
| node-click | 节点 click 事件 | -- |

View File

@ -11,7 +11,7 @@ import { Nullable } from '/@src/module/type'
import LayIcon from '../../icon'
import LayCheckbox from '../../checkbox'
import { nextTick, Ref } from 'vue'
import { Tree } from "/@src/module/tree/new-tree/tree";
import { Tree } from '/@src/module/tree/new-tree/tree'
type CustomKey = string | number
type CustomString = (() => string) | string
@ -71,9 +71,7 @@ const nodeIconType = (node: TreeData): string => {
return 'layui-icon-file'
}
function recursiveNodeClick(
node: TreeData
) {
function recursiveNodeClick(node: TreeData) {
emit('node-click', node)
}
@ -146,9 +144,9 @@ function handleTitleClick(node: TreeData) {
:node-list="node.children"
:show-checkbox="showCheckbox"
:show-line="showLine"
@node-click="recursiveNodeClick"
:tree="tree"
:only-icon-control="onlyIconControl"
@node-click="recursiveNodeClick"
/>
</div>
</transition>

View File

@ -117,8 +117,12 @@ class Tree {
})
node.isDisabled.value = nodeDisabled
node.isChecked.value = parentNode ? parentNode.isChecked.value : checkedKeys.includes(nodeKey)
node.isLeaf.value = parentNode ? parentNode.isLeaf.value : expandKeys.includes(nodeKey)
node.isChecked.value = parentNode
? parentNode.isChecked.value
: checkedKeys.includes(nodeKey)
node.isLeaf.value = parentNode
? parentNode.isLeaf.value
: expandKeys.includes(nodeKey)
node.isLeaf.value = nodeIsLeaf
if (!nodeMap.has(nodeKey)) {

View File

@ -32,4 +32,3 @@ export interface TreeEmits {
(e: 'update:expandKeys', keys: KeysType): void
(e: 'node-click', node: OriginalTreeData, event: Event): void
}

View File

@ -1,9 +1,10 @@
import {
OriginalTreeData, StringFn,
StringOrNumber
} from "/@src/module/tree/new-tree/tree.type";
import { computed, ref, Ref } from "vue";
import { Nullable } from "/@src/module/type";
OriginalTreeData,
StringFn,
StringOrNumber,
} from '/@src/module/tree/new-tree/tree.type'
import { computed, ref, Ref } from 'vue'
import { Nullable } from '/@src/module/type'
export interface TreeConfig {
disabled: boolean
@ -25,14 +26,24 @@ export const useTreeData = (
})
}
function getTreeNodes(origin: OriginalTreeData[], config: TreeConfig, parentId = '') {
function getTreeNodes(
origin: OriginalTreeData[],
config: TreeConfig,
parentId = ''
) {
const len = origin.length
for (let i = 0; i < len; i++) {
const node = createTreeNode(config, origin[i], i, len, parentId)
}
}
function createTreeNode (config: TreeConfig, current: OriginalTreeData, i: number, len: number, parentId: string) {
function createTreeNode(
config: TreeConfig,
current: OriginalTreeData,
i: number,
len: number,
parentId: string
) {
const treeNode = new TreeNode(current)
const { disabled, spread } = config
treeNode.isDisabled.value = disabled