javascript - element 级联选择器数据源过滤？
element 级联选择器，选项是全国行政区划。此时后端返回的是一个二维数组，比如[['浙江省','杭州市','余杭区'],['江苏省','南京市]], 修改级联选择器选项的树型结构的值为
[ { "code": "32", "name": "江苏省", "children": [ { "code": "3201", "name": "南京市", "children": [ { "code": "320102", "name": "玄武区" }, { "code": "320104", "name": "秦淮区" }, { "code": "320105", "name": "建邺区" }, { "code": "320106", "name": "鼓楼区" }, { "code": "320111", "name": "浦口区" }, { "code": "320113", "name": "栖霞区" }, { "code": "320114", "name": "雨花台区" }, { "code": "320115", "name": "江宁区" }, { "code": "320116", "name": "六合区" }, { "code": "320117", "name": "溧水区" }, { "code": "320118", "name": "高淳区" } ] } ] }, { "code": "33", "name": "浙江省", "children": [ { "code": "3301", "name": "杭州市", "children": [ { "code": "330110", "name": "余杭区" } ] } ] }]请问这个算法该如何编写？
共有1个答案
通过该方法可以实现树结构。
function convertToTree(data) { const tree = []; data.forEach(items => { let currentNode = tree; items.forEach((item, index) => { const existingNode = currentNode.find(node => node.name === item); if (existingNode) { currentNode = existingNode.children; } else { const newNode = { code: '', name: item, children: [] }; currentNode.push(newNode); currentNode = newNode.children; } if (index === items.length - 1) { currentNode.code = items[0]; } }); }); return tree;}const originalData = [['浙江省','杭州市','余杭区'],['江苏省','南京市']];console.log(convertToTree(originalData));但是实现了也没有办法获取code码啊。。。应该让后端修改返回的数据格式。或者前端自己使用静态文件来使用数据，。
-
Cascader 级联选择器 当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。 <div class="block"> <span class="demonstration">默认 c
-
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。 <div class="block"> <span class="demonstration">默认 click 触发子菜单</spa
-
Cascader 级联选择器 当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 :::demo 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过expandTrigger可以定义展开子级菜单的触发方式。本例还展示了onChange事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。
-
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 基础用法 展示多个步骤。 options 需要遵循一定的结构，具体可见示例代码 <!--你可以通过绑定 (modelChange)=handle 来获得每次值改变的触发--> <el-cascader [options]="options" (modelChange)="changeHandle($event)"> </el-ca
-
这个是我目前实现的方法，有没有更优雅点的？
-
级联选择组件。支持嵌套（字表表示法）和扁平（父指针表示法）的树形数据结构。 Usage 全部引入 import { Cascader } from 'beeshell'; 按需引入 import { Cascader } from 'beeshell/dist/components/Cascader'; Examples Cascader 与 BottomModal 组合使用 Code 详细