首页 > 其他分享 >Vue Ant Design中a-tree组件支持点击父节点名称(title\label)所有子节点选中

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

时间:2024-07-01 17:56:20浏览次数:17  
标签:node Vue title checkedKeys totalKeys children value selectedKeys 节点

  • 核心代码
<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

相关文章

  • 记一次vue脚手架打包生成的js里面变量逻辑错误的解决
    问题背景开发环境调用threejs,实现3d功能组件,开发环境测试正常,打包部署到现场后异常。浏览器控制台,报变量i和r,没有定义下图是点击报错地方打开的控制台截图。可以看到有ir变量。解决思路开发调试没有问题,那肯定是打包之后命名的变量存在不正确的逻辑了。肯定不能修改dis......
  • 【剑指offer】JZ22-链表中倒数第k个节点-Python解法
    1.题目描述2.解题思路(Python版)方法一:遍历两次思路:1.首先计算链表的长度L;2.第二次开始从头依次遍历,找到链表的第(L-k+1)个节点,即为所找的节点。参考代码:#classListNode:#def__init__(self,x):#self.val=x#self.next=None##代码中的......
  • 自定义vue3 hooks
    文章目录hooks目录结构demohooks当页面内有很多的功能,js代码太多,不好维护,可以每个功能都有写一个js或者ts,这样的话,代码易读,并且容易维护,组合式setup写法与此结合......
  • 一个项目学习Vue3---Vue模板方法
     内容资源下载:关注公众号(资小库),下载相关资源分析下面一段代码,学习模板方法的可能的知识<template><div><div>将下面的msg属性放到上面来:{{msg}}</div><divv-html="htmlMsg"></div><divv-bind="id">这个地方绑定了一个ID{{id}}</div>......
  • 使用Vue 3和Axios从第三方API获取异步数据并展示
    在前端开发中,从第三方API获取数据并动态展示是非常常见且重要的需求之一。今天我们将深入探讨如何使用Vue3和Axios从第三方API获取异步数据并将其展示在页面上。通过这个例子,你将了解如何在Vue3中集成Axios,如何进行异步请求,以及如何动态地将数据绑定到模板以实......
  • 获取所有的叶子节点
    获取所有的叶子节点/***获取叶子节点*@paramtree*@paramoptions*@returns{*[]}*/exportfunctiongetLeafNodes(tree,options={}){ const{childrenProp='children'}=options//默认子节点属性名为'children' constleafNodes=[] functio......
  • Vue整合echarts
    npm安装echartsnpminstallecharts-S安装好之后在<script>引入echartsimport*asechartsfrom'echarts'在template标签中引用<divid="main"style="width:100%;height:400px;">/div>在exportdefault中创建mounted页面元素渲染之后再触发完整V......
  • vue-element-admin搭建步骤
    克隆项目gitclonehttps://github.com/PanJiaChen/vue-admin-template.git进入项目目录cdvue-admin-template安装依赖npminstall--registry=https://registry.npm.taobao.org启动服务npmrundev浏览器访问 http://localhost:9528发布构建测试环境npmrun......
  • springboot+vue前后端分离项目-vue项目搭建6-文件上传下载
    1.新增com/example/demo/controller/FileController.javapackagecom.example.demo.controller;importcn.hutool.core.io.FileUtil;importcn.hutool.core.util.IdUtil;importcn.hutool.core.util.StrUtil;importcom.example.demo.common.Result;importjakarta.ser......
  • clickhouse集群及单节点库表占用存储
    1、单节点查询库表存储占用‘system’:库名SELECT  databaseAS`库名`,  tableAS`表名`,  sum(rows)AS`总行数`,  formatReadableSize(sum(data_uncompressed_bytes))AS`原始大小`,  formatReadableSize(sum(data_compressed_bytes))AS`压......