- 核心代码
<a-tree
ref="treeRef"
class="draggable-tree"
v-if="treeData.length"
:tree-data="treeData"
checkable
@check="treeSelect"
@select="onSelect"
:selectedKeys="selectedKeys"
:checkedKeys="checkedKeys"
v-model:expandedKeys="treeExpandKeys"
>
<template #title="node">
{{node.title}}({{node.value}})
</template>
<template #switcherIcon="{ switcherCls }"
>
<down-outlined :class="switcherCls"
/>
</template>
</a-tree>
const onSelect = (selectedKeys, {node}) => {
if(node.children.length && checkedKeys.value.includes(selectedKeys[0])) {
console.log('output-> 1', 1)
let subNodeKeys = cacheTreeData.filter(item => item.key === selectedKeys[0])[0].children.map(sub => sub.key)
let totalKeys = [
selectedKeys[0],
...subNodeKeys
]
checkedKeys.value = lodash.difference(checkedKeys.value, totalKeys)
commonSelect(checkedKeys.value)
return
}
if(node.children.length && !checkedKeys.value.includes(selectedKeys[0])) {
let subNodeKeys = cacheTreeData.filter(item => item.key === selectedKeys[0])[0].children.map(sub => sub.key)
let totalKeys = [
selectedKeys[0],
...subNodeKeys
]
console.log('output-> totalKeys::: ', totalKeys)
checkedKeys.value = [
...checkedKeys.value,
...totalKeys
]
commonSelect(checkedKeys.value)
return
}
if(!node.children.length && checkedKeys.value.includes(selectedKeys[0])) {
checkedKeys.value = checkedKeys.value.filter(val => val !== selectedKeys[0])
commonSelect(checkedKeys.value)
return
}
if(!node.children.length && !checkedKeys.value.includes(selectedKeys[0])) {
checkedKeys.value = [
...checkedKeys.value,
selectedKeys[0]
]
commonSelect(checkedKeys.value)
}
};
const treeSelect = (selectedKeys, e) => {
isSubTableData.value = false
tableColumns.value = DATAMARKET_PAGE_COLUMN
formState.pathList = selectedKeys;
checkedKeys.value = selectedKeys
page.currentPage = 1;
getTableLists();
};
标签:node,Vue,title,checkedKeys,totalKeys,children,value,selectedKeys,节点
From: https://www.cnblogs.com/openmind-ink/p/18278539