vue el-tree将选中的节点以tree结构形式数组返回

templete:

<div>
    <el-tree
      :data="data"
      show-checkbox
      node-key="label"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="[5]"
      :props="defaultProps"
      ref="tree"
    >
    </el-tree>
    <button @click="getInfo">获取数据</button>
  </div>

data:

 data: [
        {
          label: "宏观",
          children: [
            {
              label: "宏观经济",
              grade: [
                {
                  name: "谢佩瑜",
                  evaluation: "",
                  lastweek_change: "",
                  lastweek_performance: "",
                },
              ],
              children: [
                {
                  label: "经济高频数据跟踪",
                  desc: "【疫情疫苗跟踪】</br></br>1. 疫情:本轮全球疫情短暂回落后重拾上升趋势。",
                },
                {
                  label: "经济指标跟踪",
                  desc: "11月经济特征:供给冲击缓解后,生产延续修复;投资分化
                },
                { label: "重点市场观点跟踪", desc: "暂无" },
              ],
            },
            {
              label: "流动性",
              grade: [
                {
                  name: "倪旭东",
                  evaluation: "",
                  lastweek_change: "",
                  lastweek_performance: "",
                },
              ],
              children: [
                {
                  label: "货币环境跟踪",
                  desc: "预计货币政策稳健偏松,",
                },
                {
                  label: "信用环境跟踪",
                  desc: "地产政策有望边际放松,稳信用政策有望推出,",
                },
                { label: "重点市场观点跟踪", desc: "暂无" },
                { label: "重要基本假设更新", desc: "暂无" },
              ],
            },
          ],
        }],
        defaultProps: {
        children: "children",
        label: "label",
      },

methods:

getInfo() {
      const getC = this.$refs.tree.getCheckedNodes();
      const getHC = this.$refs.tree.getHalfCheckedNodes();
      let selected_nodes = getHC.concat(getC);
      let selected_ids = new Set(); // 记录选中的节点tree_id
      let used_ids = new Set(); // 记录已经查询过的节点
      // 遍历初始化selected_ids
      for (let node of selected_nodes) {
        selected_ids.add(node.$treeNodeId);
      }
      // 最终的结果数据用一个根节点存储, 为了对齐递归的数据结构
      let root_node = {
        treeNodeId: -1,
        children: [],
      };
      // 添加给parent_node节点一个新节点 node
      // 注意:node 的类型是原始的 tree 节点
      // 而parent_node 的类型是真正的结果节点
      function AddNode(node, parent_node) {
        if (
          !selected_ids.has(node.$treeNodeId) ||
          used_ids.has(node.$treeNodeId)
        ) {
          return;
        }
        used_ids.add(node.$treeNodeId); // 加过的要存入 used_ids 做标记
        let real_node = {
          treeNodeId: node.$treeNodeId,
          children: [],
          label: node.label,
          desc: node.desc,
          grade: node.grade,
          // 存储一下节点的数据
        };
        // // 添加子节点
        if (node.children) {
          for (let child_node of node.children) {
            AddNode(child_node, real_node);
          }
        }
        if (real_node.children.length === 0) {
          delete real_node.children;
        }
        if (!real_node.grade) {
          delete real_node.grade;
        }
        if (!real_node.desc) {
          delete real_node.desc;
        }
        parent_node.children.push(real_node);
      }
      for (let node of selected_nodes) {
        AddNode(node, root_node);
      }
      let result = root_node.children;
      console.log(result);
    },
  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中,取消选中el-tree节点可以使用treeRef.value.setCurrentKey(null)来实现。\[1\]这将取消选中节点并取消高亮显示。请注意,空字符串不能用于取消选中状态。如果你在使用原生JavaScript来移除选中状态的class时遇到了错误"Uncaught TypeError: Cannot read property 'classList' of undefined",可能是因为你没有正确获取到元素。在你的代码中,你使用了document.getElementsByClassName("abc")来获取元素,但是该方法返回的是一个HTMLCollection对象,而不是单个元素。你需要使用索引来获取到具体的元素,然后再使用classList.remove("is-current")来移除选中状态的class。例如,如果你想移除第一个匹配到的元素的选中状态,可以使用以下代码:var ele = document.getElementsByClassName("abc")\[0\]; ele.classList.remove("is-current");\[2\]这样就可以成功取消选中节点的状态了。 #### 引用[.reference_title] - *1* [vue3 el-tree中设置和取消高亮](https://blog.csdn.net/qq_29184685/article/details/127654287)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [el-tree设置、取消选中状态(高亮)](https://blog.csdn.net/weixin_42792507/article/details/118677210)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值