僅僅一個一維數組用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