diff --git a/package/component/src/component/checkbox/index.vue b/package/component/src/component/checkbox/index.vue index b49123a2..630f90cb 100644 --- a/package/component/src/component/checkbox/index.vue +++ b/package/component/src/component/checkbox/index.vue @@ -6,7 +6,7 @@ export default { @@ -147,18 +157,14 @@ const isChildAllSelected = computed(() => { @click.stop="handleIconClick(node)" /> - diff --git a/package/component/src/component/tree/index.vue b/package/component/src/component/tree/index.vue index 60d3dbda..e172527b 100644 --- a/package/component/src/component/tree/index.vue +++ b/package/component/src/component/tree/index.vue @@ -24,6 +24,7 @@ export interface TreeProps { checkedKeys?: KeysType; data: OriginalTreeData; showCheckbox?: boolean; + checkStrictly: boolean; edit?: EditType; collapseTransition?: boolean; onlyIconControl?: boolean; @@ -49,6 +50,7 @@ const props = withDefaults(defineProps(), { showCheckbox: false, edit: false, collapseTransition: true, + checkStrictly: false, onlyIconControl: false, disabled: false, showLine: true, @@ -77,11 +79,13 @@ let tree = ref(); let nodeList = ref(); const unWatch = ref(false); const initStatus = ref(false); + const loadNodeList = () => { let { tree: _tree, nodeList: _nodeList } = useTree(props, emit); tree.value = _tree; nodeList.value = _nodeList.value; }; + watch( () => props.data, () => { @@ -89,6 +93,7 @@ watch( }, { deep: true, immediate: true } ); + watch( () => props.checkedKeys, () => { @@ -97,6 +102,7 @@ watch( } } ); + watch( tree, () => { @@ -130,6 +136,7 @@ function handleClick(node: TreeData) { :node-list="nodeList" :show-checkbox="showCheckbox" :show-line="showLine" + :check-strictly="checkStrictly" :collapse-transition="collapseTransition" :only-icon-control="onlyIconControl" @node-click="handleClick" diff --git a/package/component/src/component/tree/tree.ts b/package/component/src/component/tree/tree.ts index 4173fcf2..a0e3d7fe 100644 --- a/package/component/src/component/tree/tree.ts +++ b/package/component/src/component/tree/tree.ts @@ -25,6 +25,7 @@ interface ReplaceFields { } interface TreeConfig { + checkStrictly: boolean; showCheckbox: boolean; checkedKeys: StringOrNumber[]; expandKeys: StringOrNumber[]; @@ -156,15 +157,15 @@ class Tree { } } - setCheckedKeys(checked: boolean, node: TreeData) { + setCheckedKeys(checked: boolean, checkStrictly: boolean, node: TreeData) { node.isChecked = checked; - // 处理上级 - if (node.parentNode) { - this.setParentChecked(checked, node.parentNode); - } - // 处理下级 - if (node.children) { - this.setChildrenChecked(checked, node.children); + if (!checkStrictly) { + if (node.parentNode) { + this.setParentChecked(checked, node.parentNode); + } + if (node.children) { + this.setChildrenChecked(checked, node.children); + } } } diff --git a/package/component/src/component/tree/tree.type.ts b/package/component/src/component/tree/tree.type.ts index cc96b424..0dc87be3 100644 --- a/package/component/src/component/tree/tree.type.ts +++ b/package/component/src/component/tree/tree.type.ts @@ -15,6 +15,7 @@ export interface TreeProps { checkedKeys?: KeysType; expandKeys?: KeysType; data: OriginalTreeData; + checkStrictly?: boolean; showCheckbox?: boolean; edit?: EditType; collapseTransition?: boolean; @@ -26,7 +27,6 @@ export interface TreeProps { title?: string; }; } - export interface TreeEmits { (e: "update:checkedKeys", keys: KeysType): void; (e: "update:expandKeys", keys: KeysType): void; diff --git a/package/component/src/component/tree/useTree.ts b/package/component/src/component/tree/useTree.ts index b0bd756e..7d9c8c04 100644 --- a/package/component/src/component/tree/useTree.ts +++ b/package/component/src/component/tree/useTree.ts @@ -23,6 +23,7 @@ export const useTree: UseTree = (props: TreeProps, emit: TreeEmits) => { showCheckbox: props.showCheckbox ?? false, checkedKeys: props.checkedKeys ?? [], expandKeys: props.expandKeys ?? [], + checkStrictly: props.checkStrictly ?? false }, props.data ); diff --git a/package/component/src/component/treeSelect/index.less b/package/component/src/component/treeSelect/index.less new file mode 100644 index 00000000..897de80a --- /dev/null +++ b/package/component/src/component/treeSelect/index.less @@ -0,0 +1,17 @@ +.layui-tree-select { + width: 220px; +} + +.layui-tree-select-content { + padding: 10px; +} + +.layui-tree-select .layui-icon-triangle-d { + transition: all 0.3s; + -webkit-transition: all 0.3s; + color: var(--global-neutral-color-8); +} + +.layui-tree-select .layui-icon-triangle-d.triangle { + transform: rotate(180deg); +} diff --git a/package/component/src/component/treeSelect/index.vue b/package/component/src/component/treeSelect/index.vue index ce9d27c6..885547a2 100644 --- a/package/component/src/component/treeSelect/index.vue +++ b/package/component/src/component/treeSelect/index.vue @@ -5,12 +5,20 @@ export default { - - diff --git a/package/component/src/index.ts b/package/component/src/index.ts index 8e62a432..c46e21af 100644 --- a/package/component/src/index.ts +++ b/package/component/src/index.ts @@ -181,7 +181,7 @@ const components: Record = { LaySpace, LayTag, LayTagInput, - LayTreeSelect + LayTreeSelect, }; const install = (app: App, options?: InstallOptions): void => { diff --git a/package/component/src/utils/treeUtil.ts b/package/component/src/utils/treeUtil.ts new file mode 100644 index 00000000..df246eaa --- /dev/null +++ b/package/component/src/utils/treeUtil.ts @@ -0,0 +1,34 @@ +export function getNode(root: any, id: string) { + let resultNode = null; + findNode(root, id); + function findNode(root: any, id: string){ + if(!!root) { + let type = Object.prototype.toString.call(root); + if(type === '[object Object]') { + if(root.id && root.id === id) { + resultNode = root + } else { + let node = root.children || null + findNode(node, id); + } + }else if(type === '[object Array]') { + let needNode = root.find((i:any) => !!i === true && i.id === id); + if(!!needNode) { + resultNode = needNode; + } else { + if(root.length) { + root.forEach((item: any)=>{ + if(item && item.children) { + let node = item.children + if(node && node.length){ + findNode(node, id); + } + } + }) + } + } + } + } + } + return resultNode; +} \ No newline at end of file diff --git a/package/document-component/src/document/zh-CN/components/tree.md b/package/document-component/src/document/zh-CN/components/tree.md index 2dca3b6b..7a31b7b8 100644 --- a/package/document-component/src/document/zh-CN/components/tree.md +++ b/package/document-component/src/document/zh-CN/components/tree.md @@ -381,6 +381,191 @@ const showCheckbox = ref(true) ::: +::: title 禁用级联 +::: + +::: demo 使用 `showCheckbox` 属性开启复选框 + + + + + +::: + ::: title 关闭连线 ::: diff --git a/package/document-component/src/document/zh-CN/components/treeSelect.md b/package/document-component/src/document/zh-CN/components/treeSelect.md index 77af48eb..d21a9c72 100644 --- a/package/document-component/src/document/zh-CN/components/treeSelect.md +++ b/package/document-component/src/document/zh-CN/components/treeSelect.md @@ -188,6 +188,360 @@ function handleClick(node) { ::: +::: title 启用多选 +::: + +::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。 + + + + + +::: + +::: title 禁用选择 +::: + +::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。 + + + + + +::: + ::: title Tree 属性 ::: diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md index 4b0a6f00..61b8a004 100644 --- a/package/document-component/src/document/zh-CN/guide/changelog.md +++ b/package/document-component/src/document/zh-CN/guide/changelog.md @@ -10,6 +10,21 @@ ::: demo