- 代碼如下
<template> <div class="safetyInfo"> <nut-searchbar placeText="請輸入詳細地址/門牌號/" v-model="search" @input="submitFun" ref='searchInput'></nut-searchbar> <ul v-for="(list,index) in searchData" :key="index"> <li> <span>{{list.phoneName}}</span> <span>{{list.ascriptionPhone}}</span> <p>{{list.provinceName+''+list.cityName+''+list.areaName}}</p> </li> </ul> </div> </template> <script> export default { name: 'HelloWorld', data() { return { search: '', searchData: '', products: [ //假數據 { 'addressId': '6554536248428871691', 'address': 'e通世界南區', 'provinceCode': '310000', 'provinceName': '上海', 'cityCode': '310100', 'cityName': '上海市', 'areaCode': '310118', 'areaName': '青浦區', 'creater': 'system@yimidida', 'createTime': '2019-07-15T10:00:39Z', 'isDelete': 1, 'isDefault': 1, 'ascriptionPhone': '17000000000', 'phoneName': '張三', 'customerCode': 'WXKY11500216249', 'channelType': 1, 'modifier': 'system@yimidida', 'modifierTime': '2019-07-15T02:02:05Z', 'recordVersion': 0 }, { 'addressId': '6554536248428871691', 'address': 'e通世界南區', 'provinceCode': '310000', 'provinceName': '上海', 'cityCode': '310100', 'cityName': '上海市', 'areaCode': '310118', 'areaName': '青浦區', 'creater': 'system@yimidida', 'createTime': '2019-07-15T10:00:39Z', 'isDelete': 1, 'isDefault': 1, 'ascriptionPhone': '18000000000', 'phoneName': '李四', 'customerCode': 'WXKY11500216249', 'channelType': 1, 'modifier': 'system@yimidida', 'modifierTime': '2019-07-15T02:02:05Z', 'recordVersion': 0 }, { 'addressId': '6554536248428871691', 'address': 'e通世界南區', 'provinceCode': '310000', 'provinceName': '上海', 'cityCode': '310100', 'cityName': '上海市', 'areaCode': '310118', 'areaName': '青浦區', 'creater': 'system@yimidida', 'createTime': '2019-07-15T10:00:39Z', 'isDelete': 1, 'isDefault': 1, 'ascriptionPhone': '18000000000', 'phoneName': '王麻子', 'customerCode': 'WXKY11500216249', 'channelType': 1, 'modifier': 'system@yimidida', 'modifierTime': '2019-07-15T02:02:05Z', 'recordVersion': 0 } ] }; }, created: function () { this.inintData(); }, methods: { inintData() { this.searchData = this.products; }, submitFun() { let search = this.search; this.searchData = this.products.filter(function (product) { console.log('過濾', product); let searchField = { phoneName: product.phoneName, ascriptionPhone: product.ascriptionPhone }; return Object.keys(searchField).some(function (key) { console.log('key值', key); return String(product[key]).toLowerCase().indexOf(search) > -1; }); }); } } }; </script>
如果對數據中所有字段都進行排序將searchField換成product
vue前端實現搜索功能
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.