refactor(tree): 树组件重构完成
This commit is contained in:
parent
11dc8f1e21
commit
ba784a3dff
@ -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 事件 | -- |
|
||||
|
@ -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>
|
||||
|
@ -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)) {
|
||||
|
@ -32,4 +32,3 @@ export interface TreeEmits {
|
||||
(e: 'update:expandKeys', keys: KeysType): void
|
||||
(e: 'node-click', node: OriginalTreeData, event: Event): void
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user