vue对两个多重数组对象进行筛选过滤

最新推荐文章于 2024-06-17 09:01:02 发布

wendycwb

最新推荐文章于 2024-06-17 09:01:02 发布

阅读量910

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sinat_41200024/article/details/136454436

版权

文章描述了一个如何使用JavaScript在两个数组（options和datas）中，根据options中activeValue的值筛选出datas中相应匹配项的示例，通过filterData方法实现，并在用户点击事件中更新筛选状态并重新获取过滤后的数据。

摘要由CSDN通过智能技术生成

两个数组对象，进行筛选

两个数组
- options 里面数据被选中时，返回datas中对应的数据
- 最近当点击时调用过滤方法

两个数组

数组1： options=  [
{activeValue:'value值11' , name:'名称1', value:'value值1'},
{activeValue: null , name:'名称2', value:'value值2'},
{activeValue: null , name:'名称3', value:'value值3'},
{activeValue: null , name:'名称4', value:'value值4'}
]
数组2： datas = [
{rname: '数据1', id: 123, list : [
{name: '名称1', value:'value值1'}，
{name:'名称2', value:'value值2'},
{name:'名称3', value:'value值3'},
{name:'名称4', value:'value值4'},
]},
{rname: '数据2', id: 6666, list : [
{name: '名称1', value:'value值11'}，
{name:'名称2', value:'value值2'},
{name:'名称3', value:'value值3'},
{name:'名称4', value:'value值4'},
]},
{rname: '数据3', id: 3333, list : [
{name: '名称1', value:'value值11'}，
{name:'名称2', value:'value值2'},
{name:'名称3', value:'value值333'},
{name:'名称4', value:'value值4'},
]},
]

options 里面数据被选中时，返回datas中对应的数据

这里写一个公共的方法对数据进行过滤

// 过滤数据  options-选项配置  datas-列表数据
		filterData(options, datas) {
			// 用于记录已选择配置的数据对象
			const filterParams = {}; // { "蓝牙/车载电话": "无", "GPS导航系统", "无" }
			options.forEach((item) => {
				filterParams[item.name] = item.activeValue;
			});
			// 过滤列表数据
			let res = [];
			res = datas.filter((item) => {
				let flag = false; // true表示存在不匹配的条件
				flag = item.list.some((item) => {
					return filterParams[item.name] && (filterParams[item.name] != item.value);
				});
				return !flag;
			});
			return res;
		},

最近当点击时调用过滤方法

onClickConfig(v, item) {
			let arr = []
			item.activeValue = item.activeValue ===  v ? null : v
			this.newData = this.filterData(this.options, this.datas) || []
		},

功能实现，记录一下，供以后查阅