需求
页面中包含数据列表查询功能时,刷新页面时保持查询参数是比较常见的需求
方案
可将查询参数置于组件的路由参数中,也可以通过本地存储实现
Demo
以下,基于 vue3 & element-plus ,使用路由参数保存列表查询参数,实现刷新页面,查询条件不变
创建组件后,根据路由参数初始化查询参数
查询参数改变时,更新路由参数
<script setup>
import {
ref, reactive, onMounted } from 'vue'
import {
useRoute, useRouter } from 'vue-router'
import {
getDataList } from '@/api/demo'
const $route = useRoute(), $router = useRouter()
const {
query } = $route
const filterItems = reactive({
// 查询参数
sort: query.sort??'desc', // 默认值 desc
type: query.type,
search: query.search
})
onMounted(() => {
getDatas()
})
// 查询数据列表
function getDatas() {
getDataList(getQueryParams()).then(res => {
datas = res.data
})
}
// 获取查询参数
function getQueryParams() {
let params = {
}
for(let k in filterItems) {
if(filterItems[k]) params[k] = filterItems[k]
}
return params
}
// 表单查询
function queryHandler() {
replaceRouter()
getPagedData()
}
// 更新路由参数
function replaceRouter() {
$router.replace({
query: getQueryParams() })
}
</script>
<template>
<!-- 查询表单 -->
<el-form :inline="true" :model="filterItems">
<el-form-item label="Sort By: ">
<el-select v-model="filterItems.sort" @change="queryHandler()"></el-select>
</el-form-item>
<el-form-item label="Type: ">
<el-select v-model="filterItems.type" @change="queryHandler()"></el-select>
</el-form-item>
<el-form-item label="Search: ">
<el-input v-model="filterItems.search" @keyup.enter="queryHandler()"/>
</el-form-item>
<el-form-item>
<el-button @click="queryHandler()">查询</el-button>
</el-form-item>
</el-form>
<!-- 数据列表 -->
<el-table :data="datas"></el-table>
</template>