# 实时监听多个条件查询
- 对于多个条件查询, 统一进行处理
// 搜索查询
<el-input
v-model="listQuery.author"
clearable
placeholder="作者"
style="width: 200px;"
class="filter-item"
prefix-icon="el-icon-search"
@keyup.enter.native="handleFilter" // 敲回车 ⭐⭐⭐
@clear="handleFilter"
@blur="handleFilter"
>
</el-input>
// 下拉框查询
<el-select
v-model="listQuery.category"
placeholder="分类"
clearable
class="filter-item"
@change="handleFilter"
>
<el-option v-for="item in stateOptions" :key="item.key" :label="item.value" :value="item.key" />
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
data(){
return:{
listQuery: {} // 查询条件
}
}
methods: {
// 获取查询条件, 重新发送请求
handleFilter() {
// 获取查询参数
console.log('handleFilter', this.listQuery)
// 重置页码
this.listQuery.page = 1
// 获取 某某数据列表
this.getList()
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 配合下方查询条件进行开发
# 页面初始化收集表单查询条件
export default {
data() {
return {
listQuery: {}, // 查询条件
}
},
created() {
this.parseQuery()
},
parseQuery() {
// 收集查询条件
const query = Object.assign({}, this.$route.query)
let listQuery = {
page: 1,
pageSize: 10,
}
if (query) {
query.page && (query.page = Number(query.page))
query.pageSize && (query.pageSize = Number(query.pageSize))
listQuery = {
...listQuery,
...query
}
}
this.listQuery = listQuery
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27