refactor(tree): 树形组件重构优化暂存

This commit is contained in:
落小梅
2021-10-18 19:09:17 +08:00
parent aa51c44432
commit 520ac36d24
4 changed files with 30 additions and 26 deletions

View File

@@ -44,7 +44,7 @@ const emit = defineEmits<TreeNodeEmits>()
function renderLineShort(node: TreeData) {
return (
!node.hasNextSibling &&
node.parentKey &&
node.parentNode &&
// 外层最后一个
(!node.parentNode.hasNextSibling ||
//上一层父级有延伸线
@@ -84,30 +84,31 @@ function setChildrenChecked (checked: boolean, nodes: TreeData[]) {
}
}
async function setParentChecked (checked: boolean, parent: TreeData) {
function setParentChecked (checked: boolean, parent: TreeData) {
if (!parent) {
return
}
parent.isChecked.value = checked
const pChild = parent.children
const pChildChecked = pChild.some(c => c.isChecked.value)
if (pChildChecked) {
parent.isChecked.value = true
}
if (parent.parentNode) {
await setParentChecked(checked, parent.parentNode)
// todo
await nextTick()
const pChild = parent.children
const pChildChecked = pChild.some(c => c.isChecked.value)
console.log(pChildChecked)
if (pChildChecked) {
parent.isChecked.value = true
}
setParentChecked(checked, parent.parentNode)
}
}
function handleChange(checked: boolean, node: TreeData) {
node.isChecked.value = checked
// 处理上级
if (node.parentNode) {
setParentChecked(checked, node.parentNode)
}
// 处理下级
if (node.children) {
setChildrenChecked(checked, node.children)
}
setParentChecked(checked, node.parentNode)
}
function handleIconClick (node: TreeData) {
@@ -141,11 +142,17 @@ function handleIconClick (node: TreeData) {
<LayCheckbox
v-if="showCheckbox"
v-model:checked="node.isChecked.value"
:disabled="node.isDisabled.value"
skin="primary"
@change="({ checked }) => { handleChange(checked, node) }"
>
</LayCheckbox>
<span class="layui-tree-txt">
<span
:class="{
'layui-tree-txt': true,
'layui-disabled': node.isDisabled.value,
}"
>
{{ node.title }}
</span>
</div>

View File

@@ -1,9 +1,3 @@
/*
* @Date: 2021-10-16 02:50:17
* @LastEditors: 落小梅
* @LastEditTime: 2021-10-16 13:07:14
* @FilePath: \layui-vue\src\module\tree\new-tree\tree.ts
*/
import {
OriginalTreeData,
StringOrNumber,
@@ -61,7 +55,10 @@ function getNode(
const nodeDisabled = !!Reflect.get(origin, 'disabled')
const nodeIsLeaf = !!Reflect.get(origin, 'spread')
// const parent = nodeMap.get(parentKey)
const parent = nodeMap.get(parentKey)
if (parent) {
console.log(parent.isChecked.value);
}
// console.log((parent && parent.isChecked.value) || checkedKeys.includes(nodeKey))