如何将省市区树结构扁平化为选中节点的代码数组?

如何将省市区树结构扁平化为选中节点的代码数组?

省市区树结构扁平化转换

给了省市区的树状结构,只有选中节点的check为1,其他都为null。我们需要做的就是扁平化数据结构,把所有被选中的省、市、区代码放到一个数组中。

解决方案

思路是递归遍历树结构,将选中状态向下传递。具体步骤如下:

定义一个函数getCheckedList,接受树形结构list、当前路径parentList和上级是否被选中parentChecked作为参数。初始化结果集result为空数组。

遍历list,对于每个节点:

计算当前节点的选中状态checked,如果上级被选中或当前被选中,则认为被选中。将当前节点的code添加到当前路径中,得到新的codeList。如果当前节点还有子节点,则递归调用getCheckedList,将codeList和checked向下传递。如果当前节点是叶子节点,且被选中,则将codeList添加到结果集中。返回结果集result。

代码示例

const getCheckedList = (list, parentList = [], parentChecked = false) => {  let result = [];  if (!Array.isArray(list)) {    return result;  }  list.forEach((item) => {    const checked = parentChecked || item.check; // 父级被选中或当前被选中,均认为是被选中    const codeList = parentList.concat(item.code);    if (item.children) {      // 当前不是最内层      result = result.concat(getCheckedList(item.children, codeList, checked));    } else {      // 已到最内层      if (checked) {        result.push(codeList);      }    }  });  return result;};

使用示例:

const tree = [  {    "code": "110000",    "value": "北京市",    "check": 1,    "children": [      {        "code": "110100",        "value": "北京市",        "check": null,        "children": [          {            "code": "110101",            "value": "东城区",            "check": null          },          {            "code": "110102",            "value": "西城区",            "checked": null          }        ]      }    ]  },  /* 省略其他省市区 */];const result = getCheckedList(tree);console.log(result);

结果:

[  [ "110000", "110100", "110101" ],  [ "110000", "110100", "110102" ],  /* 省略其他选中项 */]

以上就是如何将省市区树结构扁平化为选中节点的代码数组?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1557777.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月22日 03:14:15
下一篇 2025年12月22日 03:14:27

相关推荐

  • 浮动元素修改宽高,是否会触发浏览器重排?

    浮动元素宽高修改是否触发重排 浮动元素相对于其前后的文档流内容产生环绕效果。本文将探寻对浮动元素反复修改宽高操作时,是否会触发浏览器的重排(layout)行为。 原理剖析 从浏览器的渲染流程来看,影响布局和重绘的关键在于DOM(文档对象模型)的变化。浮动属性的设置会影响元素在文档流中的位置,因此改变…

    好文分享 2025年12月22日
    000
  • 如何让 CSS 父盒子中垂直居中的子盒子文本位置不变?

    如何让 css 父盒子中垂直居中的子盒子文本位置不变? 在 CSS 布局中,经常需要将子盒子在父盒子中垂直居中,同时保持文本位置不变。以下方法可以实现这一效果: 1. 透明度设置 使用 rgba() 来设置父盒子的透明度,而不是 opacity。这将允许子盒子保持不透明。例如: .parent { …

    2025年12月22日
    000
  • 如何将 VNode 数组插入到 Vue.js 组件的特定元素中?

    插入 vnode 数组到 vue.js 组件中的元素 在 Vue.js 2 中,可以通过使用 $slots.default 来获取一个 VNode 数组。问题是如何将此数组插入到组件某个特定元素中。 获取 DOM InnerHTML 方案 1:使用 RenderNode 组件 创建一个自定义组件 R…

    2025年12月22日
    000
  • Vue.js 2 中如何将 VNode 数组插入到组件的特定元素?

    vue.js 2 中将 vnode 数组插入特定元素 如何在 Vue.js 2 中将 VNode 数组插入到组件中的特定元素下? 问题 1:如何获取元素的 InnerHTML? 可以使用以下方法获取元素的 InnerHTML: const detailRenderer = new DetailCon…

    2025年12月22日
    000
  • 如何在网页中嵌入SVG图像:直接引入与编码形式的差异?

    如何嵌入式引入网页中的 svg 图像 您提到了在网页中引入 SVG 文件时遇到的差异。某些示例直接引入了 SVG 文件的链接,而其他示例却以编码的形式显示了图像。要生成编码形式的 SVG,可以使用以下方法: 使用代码片段: fetch(‘SVG文件链接’) // 用您要嵌入的 SVG 文件的实际链接…

    2025年12月22日
    000
  • 如何将 SVG 文件引入网页并显示其内容?

    将引入的 svg 转换为代码形式 在网页中引入 SVG 文件时,查看源代码可能只看到一个类似 ./test.svg 的文件路径,而其他网站引入的 SVG 却是大段的编码。本文将介绍如何通过代码的形式引入 SVG 文件。 为此,可以使用以下步骤: 获取 SVG 文件的内容: 使用 fetch API …

    2025年12月22日
    000
  • 如何将网页引入的 SVG 文件转换为代码形式?

    如何将网页引入的svg转换为代码形式 在网页中引入svg文件后,源代码通常只会显示一个文件路径,例如./test.svg。而其他网站引入svg时,却是一大串编码。如何实现这种编码引入方式呢? 解决方案: 通过使用JavaScript的fetch()和DOMParser(),我们可以将svg文件转换为…

    2025年12月22日
    000
  • 频繁修改浮动元素的宽高,会引发重排吗?

    浮动元素宽高改变是否会引发重排? 众所周知,设置浮动属性的图片元素会使相邻文本内容环绕它排列。那么,如果反复修改浮动图片元素的宽高,是否会触发大规模的重排呢? 答案:会触发 从浏览器渲染流程来看,“重排”是一个涉及修改布局结构的过程,而“重绘”则只涉及更新像素值。修改浮动元素的宽高会影响其在布局中的…

    2025年12月22日
    000
  • 如何获取上传文件的本地实际路径?

    如何在上传文件时获取文件的本机实际路径? 在 Chrome 浏览器中上传文件时,出于安全考虑,无法直接获取文件在本机的实际路径。然而,在特定情况下,可能需要获取文件的实际路径,例如文件较大且不适合通过接口上传。 虽然无法直接通过浏览器实现此功能,但可以通过以下方法解决: 使用 ElectronJS …

    2025年12月22日
    000
  • Flex 布局中 width:0 搭配 flex:1 如何避免元素空间被挤占?

    flex 布局中为何 width:0 搭配 flex:1 可避免元素空间挤没? 在 Flex 布局中,如例子所示,为第二个元素设置 width:0 搭配 flex:1,可以防止第一个元素的宽度抢占第二个元素的空间。 计算规则 Flex 布局将容器分成父容器和子元素,父容器为弹性容器,而子元素为弹性子…

    2025年12月22日
    000
  • 如何将网页中引入的 SVG 文件转换为代码?

    将网页中引入的 svg 转换为代码 问题: 在网页中引入了一个 SVG 文件,但是源代码中只显示一个简单的 SVG 文件路径 (例如,./test.svg),而其他网站的 SVG 引入通常是一大串编码。如何实现这种编码引入方式? 答案: 可以使用 JavaScript 的 fetch 和 DOMPa…

    2025年12月22日
    000
  • 如何将网页引入的 SVG 转换为编码形式展示?

    如何将网页引入的 svg 变成编码形式? 您在网站中引入的 SVG 文件以 “./test.svg” 的形式显示在源代码中,而您希望将其转换为一串编码,类似于您在其他网站上看到的。 实现方法: 1. 创建一个 DOM 元素: 2. 使用 Fetch API 检索 SVG 文件…

    2025年12月22日
    000
  • 如何获取上传文件的实际路径?

    获取文件实际路径受限 尽管上传文件时无法获取其本地实际路径,但以下是一些潜在的解决方案。 ElectronJS ElectronJS 是一个用于构建桌面应用程序的框架,允许应用程序访问本地文件系统。使用 ElectronJS,您可以构建一个桌面应用程序,来获取本地文件选择器的实际路径。 后端服务 您…

    2025年12月22日
    000
  • “document.execCommand”过时了,构建富文本编辑器还有哪些选择?

    “document.execcommand”过时替代方案 在构建富文本编辑器时,考虑使用“document.execCommand”是一种常见的做法。然而,该API已逐渐过时,存在一些缺点。 过时原因和替代方案 “document.execCommand”是一个非标准API,兼容性问题是其过时的主要…

    2025年12月22日
    000
  • 为什么在 Safari 浏览器中 select 标签点击事件无法触发?

    select 标签在 safari 浏览器中无法触发点击事件的解决办法 在 Web 开发中,有时需要在点击下拉列表框 (select) 元素时执行某些操作。但在某些情况下,开发人员可能会遇到 select 标签在 Chrome 中可以正常触发点击事件,但在 Safari 浏览器中却无法触发的现象。 …

    2025年12月22日
    000
  • 修改浮动元素宽高,会触发页面重排吗?

    浮动元素宽高修改是否触发重排? 浮动元素因其特质,可以使其周围文本内容对其环绕。在页面渲染中,当元素的属性发生变更时,浏览器需要重新计算元素在页面中的位置和尺寸,这一过程称为重排(Layout)。 当对已经浮动的图片元素修改宽高时,是否会触发重排?理论上,更改元素尺寸会影响其位置,因此可能会引发重排…

    2025年12月22日
    000
  • 如何在 Vue.js 2 中获取 VNode 数组的 InnerHTML 并插入到特定元素中?

    vue.js 2 中 vnode 数组插入 在 Vue.js 2 中,通过 this.$slots.default 获取的 VNode 数组代表了子组件的内容。本文将探讨如何获取 VNode 的 InnerHTML 以及将其插入到组件的特定元素中。 获取 VNode 的 InnerHTML 直接获取…

    2025年12月22日
    000
  • 上传文件时,如何获取文件的本地路径?

    如何获取上传文件的实际路径? 上传文件时,出于安全考虑,浏览器通常会禁止获取文件在本地计算机上的实际路径。但如果特殊情况下需要获取此路径,你有以下几个选择: 使用ElectronJS ElectronJS是一个允许你在内部使用Node.js的桌面应用程序框架。你可以使用ElectronJS在其内部的…

    2025年12月22日
    000
  • 如何在透明父盒子内垂直居中子盒子,并保持文本位置不变?

    让子盒子在透明父盒子内垂直居中,文本位置不变 我们在 HTML 中有一个包含文本的父盒子 。现在我们需要添加一个子盒子,让它垂直居中,同时保持文本位置不变。并且,父盒子是透明度为 0.2 的,而子盒子是不透明的。 要实现这个效果,我们可以使用 CSS 中的 position 和 transform …

    2025年12月22日
    000
  • 如何使用keep-alive和component清除指定注册组件缓存?

    使用keep-alive搭配component清除指定注册组件缓存 为了在使用keep-alive搭配component构建管理页面时清除指定注册组件的缓存,需要遵循以下步骤: 在注册组件时,以item.page_id作为组件名称: Vue.component(item.page_id, loadC…

    2025年12月22日
    000

发表回复

登录后才能评论
关注微信