根据多选下拉框选中的结果,循环输出选中的标签<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 ...
随机推荐
- 【YashanDB知识库】数据变化率超过阈值统计信息失效
[问题分类]性能优化 [关键字]统计信息 [问题描述] SQL --创建表结构 drop table t1; create table t1 (id int,name varchar2(200)); ...
- 《linux实用指令积累》持续更新。。。
一.远程服务器文件拷贝 1.1.scp scp /home/a.txt root@127.0.0.1:/home/ 1.2.sshpass(适用于脚本调用,直接指定密码) 1.2.1.安装sshpas ...
- python学习教材选哪个
python语言俨然成为当今最流行的国际语言,无论你是做AI的还是非AI,大家都在用python语言,各种平台也都开始支持python,现在连文科生都在学习python语言了,甚至很多表哥表姐的工作都 ...
- c# 常用反射和表达式树整理
更新: 2021-06-19 反射 local function https://stackoverflow.com/questions/43348128/reflection-how-do-i-fi ...
- docker 安装启动jenkins 以及问题剖析
docker 安装启动jenkins 以及问题剖析 首先,你环境必须要有docker,我这里是自己本地虚拟机Vmware,我的虚拟机时linux centos7的 .如果你不知怎么安装虚拟机和命令 ...
- Servlet——Response对象
Response对象 Response 设置响应数据 1.响应行 void setStatus(int sc):设置响应状态码 2.响应头 ...
- 76.最小覆盖子串 Golang实现
题目描述: 给你一个字符串 s .一个字符串 t .返回 s 中涵盖 t 所有字符的最小子串.如果 s 中不存在涵盖 t 所有字符的子串,则返回空字符串 "" . 注意: 对于 t ...
- MySQL精品学习资源合集 | 含学习教程笔记、运维技巧、图书推荐
MySQL凭借开源.免费.低门槛.稳定等优势,成为了当前最流行的关系型数据库之一.从1998年发行第一版以来,通过不断地更新迭代,MySQL被越来越多的公司使用,已然成为当下潮流. 为了帮助大家更好地 ...
- 怎么理解vue的单向数据流
单向数据流是父组件传给子组件的数据,子组件没有权利修改,只能委托父组件修改,然后子组件更新
- 12. $nextTick 的作用
使用场景:我们改变 dom 结构所依赖的数据的时候,不能直接操作 dom ,因为 dom 还没有更新完成 : 作用 : nextTick 用来感知 dom 的更新完成,类似于 updated 函数 : ...