refactor(tree): 树形组件重构优化暂存
This commit is contained in:
parent
aa51c44432
commit
520ac36d24
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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))
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user