From 43d223653e5c6895024a9b277803e6e85dded4e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com> Date: Tue, 4 Oct 2022 01:04:04 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(component):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=20tree=20=E7=BB=84=E4=BB=B6=20title=20=E6=8F=92=E6=A7=BD?= =?UTF-8?q?=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package/component/package.json | 2 +- .../src/component/table/TableRow.vue | 4 +- .../component/src/component/table/index.vue | 12 +- .../component/src/component/tree/TreeNode.vue | 18 +- .../component/src/component/tree/index.less | 4 + .../component/src/component/tree/index.vue | 9 +- package/component/src/component/tree/tree.ts | 27 +-- .../component/src/component/tree/useTree.ts | 9 - .../src/component/treeSelect/index.vue | 30 ++- .../src/document/zh-CN/components/tree.md | 146 +++----------- .../document/zh-CN/components/treeSelect.md | 181 +----------------- .../src/document/zh-CN/guide/changelog.md | 4 +- package/document-component/src/view/index.vue | 12 +- 13 files changed, 108 insertions(+), 350 deletions(-) diff --git a/package/component/package.json b/package/component/package.json index 03e3c04a..f2c4a516 100644 --- a/package/component/package.json +++ b/package/component/package.json @@ -1,6 +1,6 @@ { "name": "@layui/layui-vue", - "version": "1.5.1", + "version": "1.6.0-alpha.2", "author": "就眠儀式", "license": "MIT", "description": "a component library for Vue 3 base on layui-vue", diff --git a/package/component/src/component/table/TableRow.vue b/package/component/src/component/table/TableRow.vue index 623fb58d..edd24456 100644 --- a/package/component/src/component/table/TableRow.vue +++ b/package/component/src/component/table/TableRow.vue @@ -172,7 +172,9 @@ const renderRowClassName = (data: any, index: number) => { return props.rowClassName(data, index); }; -const childrenIndentSize = computed(() => props.currentIndentSize + props.indentSize); +const childrenIndentSize = computed( + () => props.currentIndentSize + props.indentSize +); const renderFixedStyle = (column: any, columnIndex: number) => { if (column.fixed) { diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue index 6034d368..96da4ce8 100644 --- a/package/component/src/component/table/index.vue +++ b/package/component/src/component/table/index.vue @@ -504,11 +504,13 @@ props.columns.map((value: any) => { const currentIndentSize = ref(0); const childrenExpandSpace = computed(() => { - return props.dataSource.find((value: any) => { - if (value[props.childrenColumnName]) { - return true; - } - }) != undefined; + return ( + props.dataSource.find((value: any) => { + if (value[props.childrenColumnName]) { + return true; + } + }) != undefined + ); }); /** diff --git a/package/component/src/component/tree/TreeNode.vue b/package/component/src/component/tree/TreeNode.vue index 7abfbe6b..b38c3b30 100644 --- a/package/component/src/component/tree/TreeNode.vue +++ b/package/component/src/component/tree/TreeNode.vue @@ -31,6 +31,7 @@ export interface TreeNodeProps { nodeList: TreeData[]; showCheckbox: boolean; showLine: boolean; + selectedKey: any; checkStrictly: boolean; collapseTransition: boolean; onlyIconControl: boolean; @@ -122,7 +123,7 @@ const isChildAllSelected = computed(() => { return res; } - return function (node: TreeData): boolean { + return (node: TreeData): boolean => { if (props.checkStrictly) { return false; } else { @@ -157,7 +158,7 @@ const isChildAllSelected = computed(() => { /> { :class="{ 'layui-tree-txt': true, 'layui-disabled': node.isDisabled, + 'layui-this': selectedKey === node.id }" @click.stop="handleTitleClick(node)" > - - + {{ node.title }} @@ -192,13 +189,14 @@ const isChildAllSelected = computed(() => { :node-list="node.children" :show-checkbox="showCheckbox" :show-line="showLine" + :selected-key="selectedKey" :collapse-transition="collapseTransition" :checkStrictly="checkStrictly" :only-icon-control="onlyIconControl" @node-click="recursiveNodeClick" > - diff --git a/package/component/src/component/tree/tree.ts b/package/component/src/component/tree/tree.ts index 32a50a6d..7c795fe3 100644 --- a/package/component/src/component/tree/tree.ts +++ b/package/component/src/component/tree/tree.ts @@ -133,33 +133,36 @@ class Tree { return node; } - treeForeach (tree: any, func: Function) { + treeForeach(tree: any, func: Function) { tree.forEach((data: any) => { - data.children && this.treeForeach(data.children, func) // 遍历子树 - func(data) - }) + data.children && this.treeForeach(data.children, func); // 遍历子树 + func(data); + }); } setChildrenChecked(checked: boolean, nodes: TreeData[]) { var ableCount = 0; var checkCount = 0; const len = nodes.length; - this.treeForeach(nodes ,(node: any) => { - if(!node.isDisabled) { + this.treeForeach(nodes, (node: any) => { + if (!node.isDisabled) { ableCount = ableCount + 1; - if(node.isChecked) { + if (node.isChecked) { checkCount = checkCount + 1; } } - }) - checkCount < ableCount ? checked = true : checked = false; + }); + checkCount < ableCount ? (checked = true) : (checked = false); for (let i = 0; i < len; i++) { - if(!nodes[i].isDisabled || (nodes[i].isDisabled && nodes[i].children.length > 0)) { + if ( + !nodes[i].isDisabled || + (nodes[i].isDisabled && nodes[i].children.length > 0) + ) { nodes[i].isChecked = checked; } nodes[i].children && - nodes[i].children.length > 0 && - this.setChildrenChecked(checked, nodes[i].children); + nodes[i].children.length > 0 && + this.setChildrenChecked(checked, nodes[i].children); } } diff --git a/package/component/src/component/tree/useTree.ts b/package/component/src/component/tree/useTree.ts index 4709a27c..b97d6e24 100644 --- a/package/component/src/component/tree/useTree.ts +++ b/package/component/src/component/tree/useTree.ts @@ -33,15 +33,6 @@ export const useTree: UseTree = (props: TreeProps, emit: TreeEmits) => { return nodes; }); - watch( - () => nodeList, - (list) => { - const { checkedKeys, expandKeys } = tree.getKeys(); - emit("update:checkedKeys", checkedKeys); - }, - { deep: true } - ); - return { tree, nodeList, diff --git a/package/component/src/component/treeSelect/index.vue b/package/component/src/component/treeSelect/index.vue index 885547a2..53e48a03 100644 --- a/package/component/src/component/treeSelect/index.vue +++ b/package/component/src/component/treeSelect/index.vue @@ -19,6 +19,7 @@ export interface LayTreeSelect { collapseTagsTooltip?: boolean; minCollapsedNum?: number; size?: string; + checkStrictly?: boolean; } export interface TreeSelectEmits { @@ -34,13 +35,14 @@ const props = withDefaults(defineProps(), { allowClear: false, collapseTagsTooltip: true, minCollapsedNum: 3, + checkStrictly: true, size: "md", }); const singleValue = ref(); const multipleValue = ref(["1"]); -const dropdownRef = ref(); const openState = ref(false); +const dropdownRef = ref(); const emits = defineEmits(); const selectedValue = computed({ @@ -53,6 +55,16 @@ const selectedValue = computed({ }, }); +const checkedKeys = computed({ + get() { + return props.multiple ? props.modelValue : []; + }, + set(value) { + emits("update:modelValue", value); + emits("change", value); + } +}) + watch( [selectedValue], () => { @@ -60,12 +72,14 @@ watch( multipleValue.value = selectedValue.value.map((value: any) => { const node: any = getNode(props.data, value); node.label = node.title; + node.closable = !node.disabled; return node; }); } else { - singleValue.value = props.data.find((item: any) => { - return item.value === selectedValue.value; - })?.label; + const node: any = getNode(props.data, selectedValue.value); + if(node) { + singleValue.value = node.title; + } } }, { immediate: true, deep: true } @@ -87,14 +101,14 @@ const handleClick = (node: any) => { @hide="openState = false" >