theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add tree 可以不选中父子

Browse Source
This commit is contained in:
Theluyuan 2023-05-17 08:56:58 +08:00
parent a19040aa60
commit adc3f9f7d3
6 changed files with 126 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
package/component/es/tree/index.js
View File

@ -24,7 +24,8 @@ const _sfc_main$1 = defineComponent({
checkStrictly: { type: [Boolean, String] },
collapseTransition: { type: Boolean },
onlyIconControl: { type: Boolean },
hideicon: { type: Boolean }
hideicon: { type: Boolean },
selectParent: { type: Boolean }
},
emits: ["node-click"],
setup(__props, { emit }) {
@ -52,7 +53,7 @@ const _sfc_main$1 = defineComponent({
emit("node-click", node);
}
function handleChange(checked, node) {
props.tree.setCheckedKeys(checked, props.checkStrictly, node);
props.tree.setCheckedKeys(checked, props.checkStrictly || props.selectParent, node);
}
function handleIconClick(node) {
node.isLeaf = !node.isLeaf;
@ -72,17 +73,16 @@ const _sfc_main$1 = defineComponent({
}
const isChildAllSelected = computed(() => {
function _isChildAllSelected(node) {
if (!props.showCheckbox) {
return false;
}
let childSelectNum = 0;
let res = false;
for (const item of node.children) {
if (item.isChecked)
childSelectNum++;
}
if (childSelectNum > 0)
node.isChecked = true;
if (!props.selectParent) {
if (childSelectNum > 0)
node.isChecked = true;
}
if (childSelectNum == node.children.length) {
for (const item of node.children) {
res = _isChildAllSelected(item);
@ -95,11 +95,14 @@ const _sfc_main$1 = defineComponent({
return res;
}
return (node) => {
console.log(props.selectParent);
if (props.checkStrictly) {
return false;
} else {
} else if (props.selectParent) {
let res = _isChildAllSelected(node);
return res;
} else {
return false;
}
};
});
@ -166,6 +169,7 @@ const _sfc_main$1 = defineComponent({
checkStrictly: __props.checkStrictly,
"only-icon-control": __props.onlyIconControl,
hideicon: props.hideicon,
"select-parent": props.selectParent,
onNodeClick: recursiveNodeClick
}, createSlots({ _: 2 }, [
_ctx.$slots.title ? {
@ -177,7 +181,7 @@ const _sfc_main$1 = defineComponent({
]),
key: "0"
} : void 0
]), 1032, ["tree", "node-list", "show-checkbox", "show-line", "selected-key", "collapse-transition", "checkStrictly", "only-icon-control", "hideicon"])
]), 1032, ["tree", "node-list", "show-checkbox", "show-line", "selected-key", "collapse-transition", "checkStrictly", "only-icon-control", "hideicon", "select-parent"])
])) : createCommentVNode("", true)
]),
_: 2
@ -227,6 +231,7 @@ class Tree {
checkStrictly,
replaceFields: { children, id, title }
} = this.config;
console.log(origin, "origin");
const nodeKey = Reflect.get(origin, id);
const nodeTitle = Reflect.get(origin, title);
const nodeChildren = Reflect.get(origin, children);
@ -264,6 +269,7 @@ class Tree {
});
}
setChildrenChecked(checked, nodes) {
console.log("\u8D70\u8D4B\u503C\u5B50\u8282\u70B9\u4E86");
var ableCount = 0;
var checkCount = 0;
const len = nodes.length;
@ -284,6 +290,7 @@ class Tree {
}
}
setParentChecked(checked, parent) {
console.log("\u8D70\u8D4B\u503C\u7236\u8282\u70B9\u4E86");
if (!parent) {
return;
}
@ -299,6 +306,7 @@ class Tree {
}
setCheckedKeys(checked, checkStrictly, node) {
node.isChecked = checked;
console.log(node, checkStrictly, 186);
if (!checkStrictly) {
if (node.parentNode) {
this.setParentChecked(checked, node.parentNode);
@ -383,7 +391,8 @@ const _sfc_main = defineComponent({
title: "title"
};
} },
hideicon: { type: Boolean }
hideicon: { type: Boolean },
selectParent: { type: Boolean, default: false }
},
emits: ["update:checkedKeys", "update:expandKeys", "node-click"],
setup(__props, { emit }) {
@ -446,7 +455,8 @@ const _sfc_main = defineComponent({
"collapse-transition": __props.collapseTransition,
"only-icon-control": __props.onlyIconControl,
onNodeClick: handleClick,
hideicon: props.hideicon
hideicon: props.hideicon,
selectParent: props.selectParent
}, createSlots({ _: 2 }, [
_ctx.$slots.title ? {
name: "title",
@ -455,7 +465,7 @@ const _sfc_main = defineComponent({
]),
key: "0"
} : void 0
]), 1032, ["tree", "node-list", "show-checkbox", "show-line", "selectedKey", "check-strictly", "collapse-transition", "only-icon-control", "hideicon"])
]), 1032, ["tree", "node-list", "show-checkbox", "show-line", "selectedKey", "check-strictly", "collapse-transition", "only-icon-control", "hideicon", "selectParent"])
], 2);
};
}

34
package/component/lib/index.js
View File

@ -17621,7 +17621,8 @@ const _sfc_main$K = defineComponent({
checkStrictly: { type: [Boolean, String] },
collapseTransition: { type: Boolean },
onlyIconControl: { type: Boolean },
hideicon: { type: Boolean }
hideicon: { type: Boolean },
selectParent: { type: Boolean }
},
emits: ["node-click"],
setup(__props, { emit }) {
@ -17649,7 +17650,7 @@ const _sfc_main$K = defineComponent({
emit("node-click", node);
}
function handleChange(checked, node) {
props.tree.setCheckedKeys(checked, props.checkStrictly, node);
props.tree.setCheckedKeys(checked, props.checkStrictly || props.selectParent, node);
}
function handleIconClick(node) {
node.isLeaf = !node.isLeaf;
@ -17669,17 +17670,16 @@ const _sfc_main$K = defineComponent({
}
const isChildAllSelected = computed$1(() => {
function _isChildAllSelected(node) {
if (!props.showCheckbox) {
return false;
}
let childSelectNum = 0;
let res = false;
for (const item of node.children) {
if (item.isChecked)
childSelectNum++;
}
if (childSelectNum > 0)
node.isChecked = true;
if (!props.selectParent) {
if (childSelectNum > 0)
node.isChecked = true;
}
if (childSelectNum == node.children.length) {
for (const item of node.children) {
res = _isChildAllSelected(item);
@ -17692,11 +17692,14 @@ const _sfc_main$K = defineComponent({
return res;
}
return (node) => {
console.log(props.selectParent);
if (props.checkStrictly) {
return false;
} else {
} else if (props.selectParent) {
let res = _isChildAllSelected(node);
return res;
} else {
return false;
}
};
});
@ -17763,6 +17766,7 @@ const _sfc_main$K = defineComponent({
checkStrictly: __props.checkStrictly,
"only-icon-control": __props.onlyIconControl,
hideicon: props.hideicon,
"select-parent": props.selectParent,
onNodeClick: recursiveNodeClick
}, createSlots({ _: 2 }, [
_ctx.$slots.title ? {
@ -17774,7 +17778,7 @@ const _sfc_main$K = defineComponent({
]),
key: "0"
} : void 0
]), 1032, ["tree", "node-list", "show-checkbox", "show-line", "selected-key", "collapse-transition", "checkStrictly", "only-icon-control", "hideicon"])
]), 1032, ["tree", "node-list", "show-checkbox", "show-line", "selected-key", "collapse-transition", "checkStrictly", "only-icon-control", "hideicon", "select-parent"])
])) : createCommentVNode("", true)
]),
_: 2
@ -17824,6 +17828,7 @@ class Tree {
checkStrictly,
replaceFields: { children, id, title }
} = this.config;
console.log(origin, "origin");
const nodeKey = Reflect.get(origin, id);
const nodeTitle = Reflect.get(origin, title);
const nodeChildren = Reflect.get(origin, children);
@ -17861,6 +17866,7 @@ class Tree {
});
}
setChildrenChecked(checked, nodes) {
console.log("\u8D70\u8D4B\u503C\u5B50\u8282\u70B9\u4E86");
var ableCount = 0;
var checkCount = 0;
const len = nodes.length;
@ -17881,6 +17887,7 @@ class Tree {
}
}
setParentChecked(checked, parent) {
console.log("\u8D70\u8D4B\u503C\u7236\u8282\u70B9\u4E86");
if (!parent) {
return;
}
@ -17896,6 +17903,7 @@ class Tree {
}
setCheckedKeys(checked, checkStrictly, node) {
node.isChecked = checked;
console.log(node, checkStrictly, 186);
if (!checkStrictly) {
if (node.parentNode) {
this.setParentChecked(checked, node.parentNode);
@ -17980,7 +17988,8 @@ const _sfc_main$J = defineComponent({
title: "title"
};
} },
hideicon: { type: Boolean }
hideicon: { type: Boolean },
selectParent: { type: Boolean, default: false }
},
emits: ["update:checkedKeys", "update:expandKeys", "node-click"],
setup(__props, { emit }) {
@ -18043,7 +18052,8 @@ const _sfc_main$J = defineComponent({
"collapse-transition": __props.collapseTransition,
"only-icon-control": __props.onlyIconControl,
onNodeClick: handleClick,
hideicon: props.hideicon
hideicon: props.hideicon,
selectParent: props.selectParent
}, createSlots({ _: 2 }, [
_ctx.$slots.title ? {
name: "title",
@ -18052,7 +18062,7 @@ const _sfc_main$J = defineComponent({
]),
key: "0"
} : void 0
]), 1032, ["tree", "node-list", "show-checkbox", "show-line", "selectedKey", "check-strictly", "collapse-transition", "only-icon-control", "hideicon"])
]), 1032, ["tree", "node-list", "show-checkbox", "show-line", "selectedKey", "check-strictly", "collapse-transition", "only-icon-control", "hideicon", "selectParent"])
], 2);
};
}

17
package/component/src/component/tree/TreeNode.vue
View File

@ -24,6 +24,7 @@ export interface TreeData {
isLeaf: boolean;
hasNextSibling: boolean;
parentNode: Nullable<TreeData>;
selectParent:boolean;
}
export interface TreeNodeProps {
@ -36,6 +37,7 @@ export interface TreeNodeProps {
collapseTransition: boolean;
onlyIconControl: boolean;
hideicon?: boolean;
selectParent:boolean;
}
interface TreeNodeEmits {
@ -81,7 +83,7 @@ function recursiveNodeClick(node: TreeData) {
}
function handleChange(checked: boolean, node: TreeData) {
props.tree.setCheckedKeys(checked, props.checkStrictly, node);
props.tree.setCheckedKeys(checked, props.checkStrictly || props.selectParent, node);
}
function handleIconClick(node: TreeData) {
@ -106,15 +108,14 @@ function handleRowClick(node: TreeData) {
//判断是否半选
const isChildAllSelected = computed(() => {
function _isChildAllSelected(node: TreeData): boolean {
if (!props.showCheckbox) {
return false;
}
let childSelectNum = 0;
let res = false; // true为半选 false为全选
for (const item of node.children) {
if (item.isChecked) childSelectNum++;
}
if (childSelectNum > 0) node.isChecked = true; //此处的处理与 checkedKeys 有关联
if(!props.selectParent){
if (childSelectNum > 0) node.isChecked = true; //此处的处理与 checkedKeys 有关联
}
if (childSelectNum == node.children.length) {
//继续递归向下判断
for (const item of node.children) {
@ -128,11 +129,14 @@ const isChildAllSelected = computed(() => {
}
return (node: TreeData): boolean => {
console.log(props.selectParent)
if (props.checkStrictly) {
return false;
} else {
} else if(props.selectParent) {
let res = _isChildAllSelected(node);
return res;
}else{
return false
}
};
});
@ -198,6 +202,7 @@ const isChildAllSelected = computed(() => {
:checkStrictly="checkStrictly"
:only-icon-control="onlyIconControl"
:hideicon="props.hideicon"
:select-parent="props.selectParent"
@node-click="recursiveNodeClick"
>
<template v-if="$slots.title" v-slot:title="slotProp: { data: any }">

3
package/component/src/component/tree/index.vue
View File

@ -39,6 +39,7 @@ export interface TreeProps {
showCheckbox?: boolean;
replaceFields?: ReplaceFieldsOptions;
hideicon?: boolean;
selectParent?: boolean;
}
interface TreeEmits {
@ -65,6 +66,7 @@ const props = withDefaults(defineProps<TreeProps>(), {
title: "title",
};
},
selectParent:false
});
const slots = useSlots();
@ -146,6 +148,7 @@ function handleClick(node: TreeData) {
:only-icon-control="onlyIconControl"
@node-click="handleClick"
:hideicon="props.hideicon"
:selectParent="props.selectParent"
>
<template v-if="$slots.title" v-slot:title="{ data }">
<slot name="title" :data="data"></slot>

7
package/component/src/component/tree/tree.ts
View File

@ -94,7 +94,7 @@ class Tree {
checkStrictly,
replaceFields: { children, id, title },
} = this.config;
console.log(origin,"origin")
const nodeKey = Reflect.get(origin, id);
const nodeTitle = Reflect.get(origin, title);
const nodeChildren = Reflect.get(origin, children);
@ -112,7 +112,7 @@ class Tree {
isChecked: false,
isLeaf: false,
hasNextSibling: hasNextSibling,
parentNode: parentNode || null,
parentNode: parentNode || null
});
node.isDisabled = nodeDisabled;
@ -137,6 +137,7 @@ class Tree {
}
setChildrenChecked(checked: boolean, nodes: TreeData[]) {
console.log("走赋值子节点了")
var ableCount = 0;
var checkCount = 0;
const len = nodes.length;
@ -163,6 +164,7 @@ class Tree {
}
setParentChecked(checked: boolean, parent: TreeData) {
console.log("走赋值父节点了")
if (!parent) {
return;
}
@ -183,6 +185,7 @@ class Tree {
node: TreeData
) {
node.isChecked = checked;
console.log(node,checkStrictly,186)
if (!checkStrictly) {
if (node.parentNode) {
this.setParentChecked(checked, node.parentNode);

126
package/component/umd/index.js
View File

File diff suppressed because one or more lines are too long