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
