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

@ -9,7 +9,7 @@
}" }"
:lay-skin="skin" :lay-skin="skin"
> >
<span><slot /></span> <span v-if="$slots?.default"><slot /></span>
<i class="layui-icon layui-icon-ok" /> <i class="layui-icon layui-icon-ok" />
</div> </div>
</span> </span>

View File

@ -44,7 +44,7 @@ const emit = defineEmits<TreeNodeEmits>()
function renderLineShort(node: TreeData) { function renderLineShort(node: TreeData) {
return ( return (
!node.hasNextSibling && !node.hasNextSibling &&
node.parentKey && node.parentNode &&
// //
(!node.parentNode.hasNextSibling || (!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) { if (!parent) {
return return
} }
parent.isChecked.value = checked parent.isChecked.value = checked
if (parent.parentNode) {
await setParentChecked(checked, parent.parentNode)
// todo
await nextTick()
const pChild = parent.children const pChild = parent.children
const pChildChecked = pChild.some(c => c.isChecked.value) const pChildChecked = pChild.some(c => c.isChecked.value)
console.log(pChildChecked)
if (pChildChecked) { if (pChildChecked) {
parent.isChecked.value = true parent.isChecked.value = true
} }
if (parent.parentNode) {
setParentChecked(checked, parent.parentNode)
} }
} }
function handleChange(checked: boolean, node: TreeData) { function handleChange(checked: boolean, node: TreeData) {
node.isChecked.value = checked node.isChecked.value = checked
//
if (node.parentNode) {
setParentChecked(checked, node.parentNode)
}
//
if (node.children) { if (node.children) {
setChildrenChecked(checked, node.children) setChildrenChecked(checked, node.children)
} }
setParentChecked(checked, node.parentNode)
} }
function handleIconClick (node: TreeData) { function handleIconClick (node: TreeData) {
@ -141,11 +142,17 @@ function handleIconClick (node: TreeData) {
<LayCheckbox <LayCheckbox
v-if="showCheckbox" v-if="showCheckbox"
v-model:checked="node.isChecked.value" v-model:checked="node.isChecked.value"
:disabled="node.isDisabled.value"
skin="primary" skin="primary"
@change="({ checked }) => { handleChange(checked, node) }" @change="({ checked }) => { handleChange(checked, node) }"
> >
</LayCheckbox> </LayCheckbox>
<span class="layui-tree-txt"> <span
:class="{
'layui-tree-txt': true,
'layui-disabled': node.isDisabled.value,
}"
>
{{ node.title }} {{ node.title }}
</span> </span>
</div> </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 { import {
OriginalTreeData, OriginalTreeData,
StringOrNumber, StringOrNumber,
@ -61,7 +55,10 @@ function getNode(
const nodeDisabled = !!Reflect.get(origin, 'disabled') const nodeDisabled = !!Reflect.get(origin, 'disabled')
const nodeIsLeaf = !!Reflect.get(origin, 'spread') 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)) // console.log((parent && parent.isChecked.value) || checkedKeys.includes(nodeKey))