博客

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);
    },