vue2.0实现多维数组筛选过滤排序

仅仅一个一维数组用vue很好排序 网上也有很多demo 但是多维数组如何排序呢 试了好多遍 发现可以用数组遍历之后 再过滤排序就很简单了

以下是代码 如果是后台请求的数据 也可遍历后进行过滤排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="range3/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input v-model='search' />
			<ul v-if="searchData.length > 0">
				<li v-for="(item,index) in searchData">
					{{item.name}}
					<!-- <span v-for="(item1,index1) in searchData[index]">
					  {{item1.name}}
				  </span> -->
				</li>
			</ul>
			<div v-else>暂无数据</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				search: '',
				// 				products: [{
				// 					name: '苹果',
				// 					price: 25,
				// 					category: "水果"
				// 				}, {
				// 					name: '香蕉',
				// 					price: 15,
				// 					category: "水果"
				// 				}, {
				// 					name: '雪梨',
				// 					price: 65,
				// 					category: "水果"
				// 				}, {
				// 					name: '宝马',
				// 					price: 2500,
				// 					category: "汽车"
				// 				}, 
				// 				{
				// 					name: '宝333',
				// 					price: 111,
				// 					category: "汽车2"
				// 				}, {
				// 					name: '奔驰',
				// 					price: 10025,
				// 					category: "汽车"
				// 				}, {
				// 					name: '柑橘',
				// 					price: 15,
				// 					category: "水果"
				// 				}, {
				// 					name: '奥迪',
				// 					price: 25,
				// 					category: "汽车"
				// 				}]
				products: [
					[{
						"name": "Milk"
					}, {
						"name": "Donuts"
					}, {
						"name": "Chocolate"
					}, {
						"name": "Peanut"
					}, {
						"name": "Bismol"
					}, {
						"name": "Chocolate"
					}],
					[{
						"name": "Donuts"
					}, {
						"name": "Chocolate"
					}, {
						"name": "Peanut"
					}, {
						"name": "Bismol"
					}, {
						"name": "Chocolate"
					}],
					[{
						"name": "Milk"
					}, {
						"name": "Donuts"
					}, {
						"name": "Chocolate"
					}, {
						"name": "Peanut"
					}]
				],
				arr: [],
			},
			computed: {
				searchData: function() {
					var search = this.search;
					if (search) {
						console.log(JSON.stringify(this.arr))
						return this.arr.filter(function(product) {
							return Object.keys(product).some(function(key) {
								return String(product[key]).toLowerCase().indexOf(search) > -1
							})
						})
					}

					return this.arr;
				}
			},
			created() {
				for (var i = 0; i < this.products.length; i++) {

					for (var j = 0; j < this.products[i].length; j++) {
						this.arr.push(this.products[i][j])
					}
				}
			}
		})
	</script>
</html>

效果图：

 

以上代码复制可直接运行，注意引一下vue.js

参考：https://blog.csdn.net/dx18520548758/article/details/80109038

　　　https://blog.csdn.net/sinat_17775997/article/details/56495373　

　　　https://segmentfault.com/q/1010000006251650

posted @ 2019-04-08 16:58  涵三点  阅读(4368)  评论(0)    收藏  举报