根据多选下拉框选中的结果,循环输出选中的标签<el-cascader>;对象数组由二维变成一维
下面的图是要实现的交互图,根据<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>;对象数组由二维变成一维的更多相关文章
- js怎么能取得多选下拉框选中的多个值?
方法:获取多选下拉框对象数组→循环判断option选项的selected属性(true为选中,false为未选中)→使用value属性取出选中项的值.实例演示如下: 1.HTML结构 1 2 3 4 ...
- bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式 二.HTML代码 <select id="msgRoles" multiple=&q ...
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- js多选下拉框
1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...
- 多选下拉框带搜索(aps.net)
自己写了一个带搜索功能的多选下拉框,为了要获取值,就没有封装插件,实现思路 1.一个文本框 做搜索 2.一个文本框显示选中文本,一个隐藏控件存值 3.一个div里面绑定CheckBoxList控件(这 ...
- MVC实现多选下拉框,保存并显示多选项
在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...
- 自定义SWT控件二之自定义多选下拉框
2.自定义下拉多选框 package com.view.control.select; import java.util.ArrayList; import java.util.HashMap; im ...
- select2的多选下拉框上传
1.加入multiple: true,属性实现多选下拉框样式 2.下拉框选择后的值是数组类型不要经过数据处理才能进行表单提交 提交的时候原下拉框所在的标签不提交,而是将多选后的值存入页面中的一个隐藏标 ...
- Easyui-Combobox多选下拉框
因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开. 效果如下: 代码如下: <html> <head> <title> ...
- Extjs4.2 多选下拉框
//多选下拉框 Ext.define('MDM.view.custom.MultiComboBox', { extend: 'Ext.form.ComboBox', alias: 'widget.mu ...
随机推荐
- pyinstaller 打包成 exe
生成 spec 和可执行文件: pyinstaller --onefile your_file.py 如果需要修改生成的spec文件,则后续可以这样运行: pyinstaller -F your_fi ...
- [big data] main entry for Spark, Zeppelin, Delta Lake ...
1. 环境搭建 big data env setup 2. Spark 学习 spark 怎么读写 elasticsearch spark 怎么 连接 读写 ElasticSearch Spark 上 ...
- DECL: 针对噪声时间序列的去噪感知对比学习《Denoising-Aware Contrastive Learning for Noisy Time Series》(时间序列、对比学习、去噪)
今天是2024年9月12日,组会摸鱼,很久没看论文了,在摸鱼看代码,最近IJCAI 2024出来了,找了几篇论文看,首先这是第一篇. 论文:Denoising-Aware Contrastive Le ...
- JavaScript – 理解 Function, Object, Prototype, This, Class, Mixins
前言 JavaScript (简称 JS) 有几个概念 Object, Prototype, This, Function, Class 是比较难理解的 (相对其它语言 C# / Java 而已),这 ...
- CSS & JS Effect – Hero Banner Swiper
效果 重点 1. 一张图片, 一个 content 定位居中作为一个 slide 2. slider 用了 JavaScript Library – Swiper 3. 当 slide active ...
- Linux_Bash_Shell_索引数组和关联数组及稀疏数组
1. 索引数组 一.什么是索引数组? 所谓索引数组就是普通数组,以整数作为数组元素的索引下标. 二.实例. 备注: (a)使用-a选项定义索引数组,使用一对小括号()定义数组中的元素列表. (b)索引 ...
- Atcoder Beginner Contest 367
A.Shout Everyday \(\text{Diff }43\) 给你 \(24\) 小时制下的 \(A,B,C\) 三个时刻,问 \(A\) 是否在 \([B,C]\) 范围内 考虑到先将 \ ...
- 数据库周刊33丨腾讯Tbase新版本发布;“2020数据技术嘉年华”有奖话题遴选;阿里云技术面试题;APEX 实现数据库自动巡检;MYSQL OCP题库……
摘要:墨天轮数据库周刊第33期发布啦,每周1次推送本周数据库相关热门资讯.精选文章.干货文档. 热门资讯 1.中国移动国产OLTP数据库中标公告:南大金仓阿里,万里开源中兴 分获大单[摘要]近日,中国 ...
- 时隔半年 DotNetGuide 已突破了 6.6K + Star,持续更新,欢迎更多小伙伴PR投稿!
前言 记得今年5月份的时候 DotNetGuide GitHub才突破5k Star,经过持续不断地输出时隔半年 DotNetGuide 已突破了 6.6K + Star!并且由我创建的DotNetG ...
- FFmpeg开发笔记(五十六)使用Media3的Exoplayer播放网络视频
Android早期的MediaPlayer控件对于网络视频的兼容性很差,所以后来单独推出了Exoplayer库增强支持网络视频,在<Android Studio开发实战:从零基础到App上线( ...