下面的图是要实现的交互图,根据<el-cascader>中v-model绑定的数据,再去下拉框出书数据中进行比对输出

v-model绑定的数据是一个二维数组,是这样的一组数据

[[1,12],[1,24]]

而下拉框的初始数据也是一个对象数组,类似于这样的一个结构

[{
"id": 1,
"label": "电视媒体",
"children": [{
"id": 43,
"label": "教育科技"
}, {
"id": 44,
"label": "公共新闻"
}, {
"id": 45,
"label": "民生休闲"
}, {
"id": 46,
"label": "钱江都市"
}, {
"id": 47,
"label": "浙江经视"
}]
}, {
"id": 2,
"label": "电台媒体",
"children": [{
"id": 6,
"label": "FM99.6民生广播"
}, {
"id": 7,
"label": "FM88浙江之声"
}, {
"id": 48,
"label": "FM107私家车广播"
}, {
"id": 49,
"label": "FM95经济广播"
}, {
"id": 50,
"label": "FM96.8音乐调频"
}, {
"id": 51,
"label": "FM93交通之声"
}]
}, {
"id": 3,
"label": "报纸媒体",
"children": [{
"id": 10,
"label": "钱江晚报"
}, {
"id": 11,
"label": "市场导报"
}, {
"id": 52,
"label": "浙江日报"
}]
}, {
"id": 4,
"label": "城市媒体",
"children": [{
"id": 12,
"label": "人民日报栏"
}, {
"id": 13,
"label": "武林广场巨幔"
}, {
"id": 53,
"label": "公交自行车亭"
}]
}, {
"id": 5,
"label": "交通媒体",
"children": [{
"id": 14,
"label": "萧山机场灯箱"
}, {
"id": 15,
"label": "火车东站灯箱"
}]
}, {
"id": 54,
"label": "校园媒体",
"children": [{
"id": 55,
"label": "平安浙江"
}]
}, {
"id": 56,
"label": "社区媒体"
}]

我需要把下拉框的初始数据由二维变成一维,下面是对象数组由二维变成一维的方法

parseArr(arr, res) {
var i = 0;
for (i = 0; i < arr.length; i++) {
if (arr[i].children && arr[i].children.length > 0) {
this.parseArr(arr[i].children, res);
var t = JSON.parse(JSON.stringify(arr[i]));
delete t.children;
res.push(t);
} else {
res.push(arr[i]);
}
}
}

其中arr是需要转换的数组,res是转换后的数组,传入的时候就是一个空对象

下面就是匹配输出

mediaTypeList() {
let arr = [], str = '', arr1 = [];
this.form.mediumTypeArray.map(item = > {
item.map(ite = > {
this.optionList.map(it = > {
if (it.id == ite) {
arr.push(it.label);
}
});
});
});
arr.map((item, i) = > {
if (2 * i >= arr.length) {
return;
}
str = arr[2 * i] + '/' + arr[2 * i + 1];
arr1.push({
label: str
});
console.log(arr1, 'arr1');
});
return arr1;
}

输出的样式就是这样的

根据多选下拉框选中的结果,循环输出选中的标签<el-cascader>;对象数组由二维变成一维的更多相关文章

  1. js怎么能取得多选下拉框选中的多个值?

    方法:获取多选下拉框对象数组→循环判断option选项的selected属性(true为选中,false为未选中)→使用value属性取出选中项的值.实例演示如下: 1.HTML结构 1 2 3 4 ...

  2. bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

    bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式  二.HTML代码 <select id="msgRoles" multiple=&q ...

  3. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  4. js多选下拉框

    1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...

  5. 多选下拉框带搜索(aps.net)

    自己写了一个带搜索功能的多选下拉框,为了要获取值,就没有封装插件,实现思路 1.一个文本框 做搜索 2.一个文本框显示选中文本,一个隐藏控件存值 3.一个div里面绑定CheckBoxList控件(这 ...

  6. MVC实现多选下拉框,保存并显示多选项

    在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...

  7. 自定义SWT控件二之自定义多选下拉框

    2.自定义下拉多选框 package com.view.control.select; import java.util.ArrayList; import java.util.HashMap; im ...

  8. select2的多选下拉框上传

    1.加入multiple: true,属性实现多选下拉框样式 2.下拉框选择后的值是数组类型不要经过数据处理才能进行表单提交 提交的时候原下拉框所在的标签不提交,而是将多选后的值存入页面中的一个隐藏标 ...

  9. Easyui-Combobox多选下拉框

    因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开. 效果如下: 代码如下: <html> <head> <title> ...

  10. Extjs4.2 多选下拉框

    //多选下拉框 Ext.define('MDM.view.custom.MultiComboBox', { extend: 'Ext.form.ComboBox', alias: 'widget.mu ...

随机推荐

  1. Go语言中的交互式CLI开发:survey库简介

    在构建命令行工具时,良好的用户交互体验至关重要.尤其是在需要与用户进行复杂输入的场景下,传统的命令行参数和标志可能显得笨拙.github.com/AlecAivazis/survey/v2 是一个为 ...

  2. 【YashanDB知识库】账号被锁,如何分析具体原因

    问题现象 客户刚开始使用YashanDB的时候,经常收到客户反馈账号被锁,但是不知道哪里触发了. 问题的风险及影响 客户环境为测试环境,影响测试业务的开展. 问题影响的版本 YashanDB版本:23 ...

  3. 使用gin实现简单的注册和登录功能

    一.前言 使用了gorm操作数据库,后端基于gin框架,只是一个简单的注册和登录与数据库交互的后端实现例子. 二.目录结构 -templates --regist.html --login.html ...

  4. 鸿蒙应用开发:环境搭建(Mac)与项目构建

    ​ 2021年6月2日,华为发布了鸿蒙操作系统-HarmonyOS.它是一款"面向未来".面向全场景(移动办公.运动健康.社交通信.媒体娱乐等)的分布式操作系统.我们要基于Harm ...

  5. Spring —— 依赖自动装配

    依赖自动装配   IoC容器根据bean所依赖的资源在容器中自动查找并注入到bean中的过程称为自动装配 自动装配方式 按类型(常用) 按名称 按构造方法 不启用自动装配    注意: 自动装配用于引 ...

  6. 普元中间件Primeton AppServer6.5安装(Windows)

    本文在Windows环境下安装普元中间件Primeton AppServer6.5(以下简称PAS) 一.安装前准备 1.1使用软件版本 Primeton_AppServer_6.5_Enterpri ...

  7. USB LFPS是什么?

    USB LFPS:低功耗状态下的高速数据传输 什么是USB LFPS? USB LFPS(Low-Power Signaling)指的是USB接口在低功耗状态下的一种高速数据传输技术.传统上,USB接 ...

  8. 高通ramdump

    背景 高通平台下提供了一个工具,专门用来抓取内核死机以后的dump信息.如果只是非系统层面的crash(例如底层应用,安卓程序),则不能抓取dump信息. 在阅读一些文档的时候知道有这个功能,但是一直 ...

  9. DBA面试资源合集(含Oracle、MySQL、Redis等)-墨天轮

    如今正值金九银十招聘季,众多企业开放大批岗位等待新力量的注入,各位DBA们,你们是否正在激情备战中? 作为企业数据化进程中十分重要的一环,DBA的职责越来越重要,作为高薪资岗位之一,应聘DBA的竞争也 ...

  10. vue前端开发仿钉图系列(4)右侧行政区绘制的开发详解

    行政区绘制是基于高德地图的api,需要在高德提供的代码基础上做好html代码在vue页面上的适配.核心功能就是选择省市区,可以根据需要绘制对应选中的地图图层.整理总结不易,如需全部代码,请联系我150 ...