vue2.0实现多维数组筛选过滤排序 |
您所在的位置：网站首页 › vue筛选数组 › vue2.0实现多维数组筛选过滤排序 |
vue2.0实现多维数组筛选过滤排序
|
仅仅一个一维数组用vue很好排序 网上也有很多demo 但是多维数组如何排序呢 试了好多遍 发现可以用数组遍历之后 再过滤排序就很简单了 以下是代码 如果是后台请求的数据 也可遍历后进行过滤排序 {{item.name}} {item1.name}} --> 暂无数据 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]) } } } })效果图：
以上代码复制可直接运行，注意引一下vue.js 参考：https://blog.csdn.net/dx18520548758/article/details/80109038 https://blog.csdn.net/sinat_17775997/article/details/56495373 https://segmentfault.com/q/1010000006251650 |
【本文地址】