<!-- 搜索页面 -->
<template>
<div>
<div>
<el-input v-model="search" placeholder="请输入内容"></el-input>
<el-button type="primary" @click="Search">搜索</el-button>
</div>
<!-- 搜索后的 -->
<div v-if="searchData.length>0">
<ul v-for="(item, index) in searchData" :key="index">
<li>
<span>{{item.contact_name}}</span>
<span>{{item.address}}</span>
<span>{{item.phone}}</span>
</li>
</ul>
</div>
<!-- 搜索前的 -->
<div v-else>
<ul v-for="(item, index) in list" :key="index">
<li>
<span>{{item.contact_name}}</span>
<span>{{item.address}}</span>
<span>{{item.phone}}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import api from "../../api/axiosConfig.js";
export default {
data() {
return {
search: "",
// 原本展示数据
list: [],
// 搜索后的展示数据
searchData: []
};
},
computed: {
...mapGetters(["getAddressList", "getLoginUser"])
},
created() {
// 获取的接口数据
this.getList();
},
mounted() {},
methods: {
goback() {
this.$router.go(-1);
},
// 获取接口中数据的方法
getList() {
let params = {
id: this.getLoginUser.id,
token_sc: this.getLoginUser.token_sc
};
api.AddressList(params).then(res => {
// list 就是原始数据
this.list = res.data;
});
},
Search() {
// search 是 v-model="search" 的 search
var search = this.search;
if (search) {
this.searchData = this.list.filter(function(product) {
// 每一项数据
// console.log(product)
return Object.keys(product).some(function(key) {
// 每一项数据的参数名
// console.log(key)
return (
String(product[key])
// toLowerCase() 方法用于把字符串转换为小写。
.toLowerCase()
// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
.indexOf(search) > -1
);
});
});
}
}
}
};
</script>
搜索功能vue
于 2021-03-12 15:39:09 首次发布