将字段动态push进新的数组形成新的数据格式供级联框使用，以及父组件调用子组件的方法

最新推荐文章于 2022-07-28 00:14:00 发布
最新推荐文章于 2022-07-28 00:14:00 发布
阅读量234 收藏
点赞数
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47733490/article/details/121509839
版权

 

 根据需求，当我选中问卷中的某一问题时，右侧可以编辑问题分支，我需要写一个可多选的级联选择器，所以要将数据处理成对应的格式

我拿到的data数据是这样的

 由于是list里面套list，所以需要双层循环，我需要将list中的label和key字段push进一个新的数组里，形成级联框能用的数据，

 先将数据第一层循环，用数剧和下标，拿到外层list的label和key，然后第二层循环，加一个chidren子集在第一层数据里，得到第二层list1的label和key，最终得到的数据格式是：

 这样就得到了能用的数据，然后此方法是在子组件中声明的，需要父组件切换问题的时候触发这个方法，所以需要父子组件传参

先在父组件中找到子组件，给其绑定一个ref节点，然后在切换问题的方法中，利用ref调用即可

 

 

刘大气
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
10-17
在这个方法中，我们遍历数组，如果遇到子数组，就对子数组递归调用`parseArr()`，否则将元素`push()`到结果数组`res`中。 **递归二（推荐）**： ```javascript function flatten(arr) { var res = []; for (let i...
Uniapp 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本
最新发布
09-21
多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker stepper input ，引用组件或者复制粘贴使用，提高工作效率。
动态设置js的属性
xinfei0803的专栏
10-18 2215
目标:js的属性名可以使用变量 举例:js对象object,当赋给该对象属性的时候可以采用以下方式 var object; object.prop1 = "value1"; object.prop2 = "value2"; 也可以采用如下方式: object.push({prop1:"value1"}); object.push({prop2:"value2"}); 在这里prop1 作为属性名称,可以直接用,也可以加上引号,比如: object.push({"prop1":"value1"}); 表达的含
对数组的去重，三级联动的列选择器
m0_48478236的博客
07-28 277
使用uniapp框架，uview组件如果你使用的也是。不知道大佬是怎么去重的。我只能展示自己的写法。
联级选择器-如何把联级选择器的内容转为string
qq_47410017的博客
09-07 553
联级选择器异常问题–如何把联级选择器的内容转为string 假设后端需要的是用，分开的字符串，前台用的是数组这样就会出现一个错误 this.addForm.goods_cat = this.addForm.goods_cat.join(',') 级联选择器绑定的也是addForm.goods_cat，他规定的是一个数组，你把他转为字符串他当然不乐意了，就给你出错啦 解决办法就是给this.addForm.goods_cat做一个深拷贝，我们需要使用lodash的cloneDepp方法 如何使用lodash
elementui 级联选择器（处理后台返回的数据格式）
j112202219的博客
12-10 3521
<el-cascader v-model="value" :options="options" @change="handleChange"> </el-cascader> 难点：作为一名前端新人，主要是做数据处理 当后台给的数据与示例的数据格式不一致时，需要作出数据处理（使用数组的map方法） 例如：后台返回的数据是这样的，那么我们怎么把他们变成elementui上的格式内容呢 op...
element ui级联选择器绑定数据数组
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
05-27 2254
级联选择器效果样式 绑定值为数组 数组只绑定最后一层级children的值（value字段）,无所选父级字段（value） 选中设计原则下子集和导航下子集： 代码 <template> <el-cascader :options="options" size="medium" class="myselect" v-model="arr" :props="props" collapse-tags clearable> </el-cascader&g
Element中的Cascader（级联列表）动态加载省\市\区数据的方法
01-21
element中的cascader其实是有动态加载次级选项的方法。 方法的原理是利用址（引用）传递，动态修改:options。 var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: tom} ...其中找到究竟需要在那层...
CascadeView级联组件实现思路详解(分离思想和单链表)
11-24
例如，一个省市区级联组件，从省级开始，每次选择一个省，就根据省的id去获取市的数据，再选择一个市，就根据市的id获取区的数据，这就形成了一个动态的单链表结构。 级联操作（Cascade Operations）在数据库中是指...
级联H桥逆变器的新型PD优化调制策略
01-05
级联H桥逆变器的新型PD优化调制策略
电源技术中的新型直流电流源TPWM级联式多电平逆变器
11-07
当前常用的三相电流型TPWM逆变器的共同特点是，并联叠加与TPwM控制，都是在逆变器上进行的，这种级联方式存在着使用的器件较多、开关损耗较大、制造成本较高的缺点。如果把并联叠加与TPWM控制都移到直流电流源上进行...
前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例
01-01
前台用AJAX直接调用后台方法，老有人发帖提问，没事做个示例 CasMenu.aspx页面： 代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”CasMenu.aspx.cs” Inherits=”_Default” %> &lt...
2023年省市区最新级联数据
02-24
2023年省市区最新级联数据
Javascript级联下拉菜单以及AJAX数据验证核心代码
12-10
虽然也使用了Prototype.js来编写，但是由于对它的不了解，类的实现仍然是使用了《JavaScript高级程序设计》里的方法。使用AJAX进行数据验证时，最初使用的是XML来当数据源，然而在使用了一段时间后，发现XML效率太低...
MySQL使用外键实现级联删除与更新的方法
01-19
本文实例讲述了MySQL使用外键实现级联删除与更新的方法。分享给大家供大家参考，具体如下： MySQL支持外键的存储引擎只有InnoDB，在创建外键的时候，要求父表必须有对应的索引，子表在创建外键的时候也会自动创建...
vue elementui 级联选择器，数据数组下套数组，josn格式解析数据
m0_60206780的博客
03-22 504
vue elementui 级联选择器，数据数组下套数组，josn格式解析数据 html部门： <el-form-item label="显示范围"> <el-cascader v-model="showRange" :options="options" placeholder="默认所有人可见" :props="{ multiple: true, filterable: true, }" collapse-tags
【JavaScript】element-ui级联选择器数据处理
我就随便问问
02-12 5819
很多时候 ，我们需要做多级关联时，会用到级联选择器。比如element-ui的级联选择器。 而级联选择器的数据结构又比较复杂，在前后端分离的今天，大多数设备比较高端，这个时候某些数据完全可以在前端处理。当然数据处理这块大多数还是交给后端同学来做，但后端同学一般情况下又很忙，毕竟一个后端对接三个前端。这个时候这个数据就需要前端去处理。 ...
el-cascader级联选择器选项数据处理(级联选择器最后一级数据为空显示暂无数据时)
在奔跑中寻找的博客
05-06 1156
选项数据结构： [ { id: 0, name: '选项1', children: [ { id: 11, name: '子选项1' }, { id: 12, name: '子选项2' } ] }, { id: 1, name: '选项2',children: [] } ] 思路：把以上数据处理成当子级children为空数组时，把children赋值undefined 1.创建getTreeData方法： function getTreeData(data) { fo.
elementui Cascader 级联选择器 自定义节点内容, 树形结构, 多级数据； 自定义返回字段
qq_41737172的博客
11-05 1620
<template> <el-cascader :options="orglist" placeholder="请选择" clearable style="height:32px" :props="treeProps" @change="orglistchange" /> </template> <script> data() { orglist:[], //在这里, 将获得的字段, 设置为 组件需要的字段名对.
小程序中使用vant的级联选择器子数据放入children后组件数据不更新
05-24
可能是因为你没有正确地更新组件的数据。在使用vant的级联选择器时，我们需要在...如果上述方法都没有解决你的问题，你可以尝试重新初始化级联选择器组件，或者查看组件的文档来了解更多关于使用方法和数据结构的信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值