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" >