Skip to content

T
template_vue
Commit 2b0982ff authored by WBY1026's avatar WBY1026
Browse files
Options

完善模糊搜索

parent dea0531f
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 50 deletions
src/views/demoData/demoData1.vue
View file @ 2b0982ff
......@@ -4,49 +4,81 @@
<!-- 这里是选择栏 -->
<div class="select">
<!-- aaa -->
<el-select v-model="myaaa" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择aaa">
<el-option v-for="item in aaa" :key="item.month" :label="item.month" :value="item.month">
</el-option>
</el-select>
<!-- <el-select v-model="mybbb" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择bbb">
<el-option v-for="item in bbb" :key="item.bbb" :label="item.bbb" :value="item.bbb">
</el-option>
</el-select> -->
<!-- bbb是2w,这里换成搜索 -->
<!-- <el-autocomplete class="inline-input" v-model="inputbbb" :fetch-suggestions="querySearch" placeholder="搜索bbb"
:trigger-on-focus="false" @select="handleSelect"></el-autocomplete> -->
<!-- ddd是3k,这里换成搜索 -->
<!-- <el-autocomplete class="inline-input" v-model="inputddd" :fetch-suggestions="querySearch" placeholder="搜索ccc"
:trigger-on-focus="false" @select="handleSelect"></el-autocomplete> -->
<!-- cccc -->
<el-select v-model="mycccc" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择cccc">
<el-option v-for="item in cccc" :key="item.cccc" :label="item.cccc" :value="item.cccc">
</el-option>
</el-select>
<el-select v-model="myddd" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择ddd">
<el-option v-for="item in ddd" :key="item.ddd" :label="item.ddd" :value="item.ddd">
<!-- eee -->
<el-select v-model="myeee" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择eee">
<el-option v-for="item in eee" :key="item.eee" :label="item.eee" :value="item.eee">
</el-option>
</el-select>
<el-switch v-model="advancedSearch" active-text="高级搜索" inactive-text="">
</el-switch>
<div class="select" v-show="advancedSearch" style="margin-top: 20px;">
<el-select v-model="mydddd" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择dddd">
<el-option v-for="item in dddd" :key="item.dddd" :label="item.dddd" :value="item.dddd">
</el-option>
</el-select>
<el-select v-model="myeee" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择eee">
<el-option v-for="item in eee" :key="item.eee" :label="item.eee" :value="item.eee">
</el-option>
</el-select>
</div>
<div v-show="advancedSearch" style="margin-left: 20px;">
<!-- bbb是2w,这里换成搜索 -->
<div style="margin-top: 10px;">
<el-autocomplete class="inline-input" v-model="inputbbb" :fetch-suggestions="querySearchBbb" placeholder="搜索bbb"
:trigger-on-focus="false" @select="handleSelectBbb">
<template slot-scope="{ item }">
<div class="name">{{ item.bbb }}</div>
</template>
</el-autocomplete>
<el-tag v-for="tag in mybbb" :key="tag" closable @close="handleCloseBbb(tag)">
{{ tag }}
</el-tag>
</div>
<!-- ddd是300,这里换成搜索 -->
<div style="margin-top: 10px;">
<el-autocomplete class="inline-input" v-model="inputddd" :fetch-suggestions="querySearchDdd" placeholder="搜索ddd"
:trigger-on-focus="false" @select="handleSelectDdd">
<template slot-scope="{ item }">
<div class="name">{{ item.ddd }}</div>
</template>
</el-autocomplete>
<el-tag v-for="tag in myddd" :key="tag" closable @close="handleCloseDdd(tag)">
{{ tag }}
</el-tag>
</div>
<!-- dddd是3k,这里换成搜索 -->
<div style="margin-top: 10px;">
<el-autocomplete class="inline-input" v-model="inputdddd" :fetch-suggestions="querySearchDddd"
placeholder="搜索dddd" :trigger-on-focus="false" @select="handleSelectDddd">
</div>
<template slot-scope="{ item }">
<div class="name">{{ item.dddd }}</div>
</template>
</el-autocomplete>
<el-tag v-for="tag in mydddd" :key="tag" closable @close="handleCloseDddd(tag)">
{{ tag }}
</el-tag>
</div>
</div>
<div class="checkBox">
<el-checkbox-group v-model="myCheckBox" :min="0" :max="3">
<el-checkbox v-for="check in checkBox" :label="check" :key="check">{{ check }}</el-checkbox>
......@@ -151,18 +183,7 @@ export default {
// {
// "month": "2024",
// "i": "wgb-i-2024",
// "j": "wgb-j-2024",
// "k": "wgb-k-2024",
// },
// {
// "month": "2025",
// "i": "wgb-i-2025",
// "j": "wgb-j-2025",
// "k": "wgb-k-2025",
// }
// ],
// },
// ],
mytableList: [],
dateColData: [],
......@@ -176,6 +197,7 @@ export default {
inputbbb: '',
inputddd: '',
inputdddd: '',
// ============================================
......@@ -211,10 +233,10 @@ export default {
this.ddd = res.data
console.log(res);
})
// searchDddd().then(res => {
// this.dddd = res.data
// console.log(res);
// })
searchDddd().then(res => {
this.dddd = res.data
console.log(res);
})
searchEee().then(res => {
this.eee = res.data
console.log(res);
......@@ -308,7 +330,7 @@ export default {
},
resetForm() {
this.myCheckBox = ['fff'],
this.myaaa = []
this.myaaa = []
this.mybbb = []
this.mycccc = []
this.myddd = []
......@@ -328,26 +350,78 @@ export default {
},
test() {
console.log(this.bbb);
console.log(this.ddd);
console.log(this.dddd);
},
// 匹配方法 ======
querySearch(queryString, cb) {
var restaurants = this.ddd;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
querySearchBbb(queryString, cb) {
var map = this.bbb;
var results = queryString ? map.filter(this.createFilterBbb(queryString)) : map;
console.log(results);
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilterBbb(queryString) {
return (map) => {
return (map.bbb.toLowerCase().indexOf(queryString.toLowerCase()) == 0);
};
},
querySearchDdd(queryString, cb) {
var map = this.ddd;
var results = queryString ? map.filter(this.createFilterDdd(queryString)) : map;
console.log(results);
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilterDdd(queryString) {
return (map) => {
return (map.ddd.toLowerCase().indexOf(queryString.toLowerCase()) == 0);
};
},
querySearchDddd(queryString, cb) {
var map = this.dddd;
var results = queryString ? map.filter(this.createFilterDddd(queryString)) : map;
console.log(results);
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.ddd.indexOf(queryString) == 0);
createFilterDddd(queryString) {
return (map) => {
return (map.dddd.toLowerCase().indexOf(queryString.toLowerCase()) == 0);
};
},
// ===============
handleSelect(e){
handleSelect(e) {
console.log(e);
},
handleSelectBbb(e) {
console.log(e);
this.mybbb.push(e.bbb)
console.log(this.mybbb);
},
handleCloseBbb(tag) {
this.mybbb.splice(this.mybbb.indexOf(tag), 1);
},
//
handleSelectDdd(e) {
console.log(e);
this.myddd.push(e.ddd)
console.log(this.myddd);
},
handleCloseDdd(tag) {
this.myddd.splice(this.myddd.indexOf(tag), 1);
},
//
handleSelectDddd(e) {
console.log(e);
this.mydddd.push(e.dddd)
},
handleCloseDddd(tag) {
this.mydddd.splice(this.mydddd.indexOf(tag), 1);
},
// ==================================================
......@@ -535,10 +609,7 @@ export default {
</style>
<!-- 多的模糊搜索 -->
<!-- 获取选中事件,选中后在后面对应的tag里面加上 -->
<!-- 删了以后相当于把数组里的tag去掉 -->
<!-- 记得去重,相同内容不让推进去 -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment