Vue Ant Design中a-tree组件支持点击父节点名称(title\label)所有子节点选中

  • 核心代码
<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();
};
posted @ 2024-07-01 17:43  Felix_Openmind  阅读(280)  评论(0编辑  收藏  举报