Vue——Vue 3中复杂查询条件处理技术难点解析

在现代管理系统中，复杂的数据查询功能是必不可少的。本文将深入探讨Vue 3中如何优雅地处理多种查询条件，包括时间范围选择、多字段筛选等，提升用户体验和代码可维护性。

技术难点分析

在信息公开管理系统中，复杂查询面临以下挑战：

1. 多样化的查询条件：文本输入、下拉选择、时间范围、树形选择等多种控件组合
2. 时间范围处理：需要将时间范围转换为后台可识别的开始和结束时间
3. 条件重置功能：需要能够一键清空所有查询条件并重新加载数据
4. 查询状态管理：需要维护查询条件状态并在页面刷新后保持
5. 性能优化：避免不必要的重复查询请求

实现效果

通过合理的查询条件处理方案，我们可以实现：

• 灵活多样的查询条件组合
• 便捷的查询条件重置功能
• 高效的时间范围处理机制
• 一致的用户体验
• 易于维护的代码结构

示例演示

以下是一个完整的示例，展示了如何在Vue 3中处理复杂查询条件：

<template> <div> <h2>信息公开查询系统</h2> <!-- 复杂查询表单 --> <a-card> <complex-query-form ref="queryFormRef" :model="queryModel" :fields="queryFields" @search="handleSearch" @reset="handleReset" > <template #extra-buttons> <a-button @click="handleExport">导出数据</a-button> <a-button @click="handleAdvancedToggle"> { { showAdvanced ? '收起' : '展开' }}高级查询 </a-button> </template> </complex-query-form> </a-card> <!-- 查询结果 --> <a-card> <a-table :data-source="tableData" :columns="columns" :loading="loading" :pagination="pagination" @change="handleTableChange" /> </a-card> </div> </template> <script setup> import { ref, reactive, onMounted } from 'vue'; import ComplexQueryForm from './ComplexQueryForm.vue'; // 查询表单引用 const queryFormRef = ref(); // 查询模型 const queryModel = reactive({ // 基础查询条件 keyword: '', status: '', type: '', dateRange: [], // 高级查询条件 department: '', priority: '', source: '', handler: '' }); // 查询字段配置 const queryFields = reactive([ // 基础查询字段 { key: 'keyword', label: '关键字', component: 'input', props: { placeholder: '请输入关键字' }, span: 6 }, { key: 'status', label: '状态', component: 'select', props: { placeholder: '请选择状态', options: [ { value: '', label: '全部' }, { value: '0', label: '待处理' }, { value: '1', label: '处理中' }, { value: '2', label: '已完成' } ] }, span: 6 }, { key: 'type', label: '类型', component: 'select', props: { placeholder: '请选择类型', options: [ { value: '', label: '全部' }, { value: 'complaint', label: '投诉' }, { value: 'praise', label: '表扬' }, { value: 'exposure', label: '曝光' } ] }, span: 6 }, { key: 'dateRange', label: '时间范围', component: 'range-picker', props: { placeholder: ['开始时间', '结束时间'] }, span: 6 }, // 高级查询字段 { key: 'department', label: '处理部门', component: 'tree-select', props: { placeholder: '请选择处理部门', treeData: [], showSearch: true }, span: 6, advanced: true }, { key: 'priority', label: '优先级', component: 'radio-group', props: { options: [ { value: '', label: '全部' }, { value: 'low', label: '低' }, { value: 'medium', label: '中' }, { value: 'high', label: '高' } ] }, span: 6, advanced: true }, { key: 'source', label: '来源', component: 'checkbox-group', props: { options: [ { value: 'web', label: '网页' }, { value: 'app', label: 'APP' }, { value: 'wechat', label: '微信' } ] }, span: 6, advanced: true }, { key: 'handler', label: '处理人', component: 'auto-complete', props: { placeholder: '请输入处理人', dataSource: [] }, span: 6, advanced: true } ]); // 表格数据 const tableData = ref([]); const loading = ref(false); // 分页配置 const pagination = reactive({ current: 1, pageSize: 10, total: 0, showSizeChanger: true, showQuickJumper: true, showTotal: (total) => `共 ${total} 条记录` }); // 是否显示高级查询 const showAdvanced = ref(false); // 处理查询 const handleSearch = async (formData) => { loading.value = true; try { // 处理查询参数 const params = { ...formData, pageNum: pagination.current, pageSize: pagination.pageSize }; // 特殊处理时间范围 if (formData.dateRange && formData.dateRange.length === 2) { params.startTime = formData.dateRange[0].format('YYYY-MM-DD'); params.endTime = formData.dateRange[1].format('YYYY-MM-DD'); } delete params.dateRange; // 处理多选值 if (Array.isArray(formData.source)) { params.source = formData.source.join(','); } console.log('查询参数:', params); // 模拟API调用 // const response = await api.queryData(params); // tableData.value = response.data.list; // pagination.total = response.data.total; // 模拟数据 tableData.value = Array.from({ length: 5 }, (_, index) => ({ id: (pagination.current - 1) * pagination.pageSize + index + 1, title: `信息标题 ${index + 1}`, type: formData.type || 'complaint', status: formData.status || '0', createTime: '2023-06-01 12:00:00', handler: '张三' })); pagination.total = 45; } catch (error) { console.error('查询失败:', error); } finally { loading.value = false; } }; // 处理重置 const handleReset = () => { pagination.current = 1; handleSearch(queryModel); }; // 处理表格变化 const handleTableChange = (pag) => { pagination.current = pag.current; pagination.pageSize = pag.pageSize; handleSearch(queryFormRef.value?.getFormData() || queryModel); }; // 处理导出 const handleExport = () => { const formData = queryFormRef.value?.getFormData(); console.log('导出数据，查询条件:', formData); // 实际导出逻辑 }; // 处理高级查询切换 const handleAdvancedToggle = () => { showAdvanced.value = !showAdvanced.value; queryFormRef.value?.setAdvancedVisible(showAdvanced.value); }; // 表格列定义 const columns = reactive([ { title: '序号', dataIndex: 'id', key: 'id' }, { title: '标题', dataIndex: 'title', key: 'title' }, { title: '类型', dataIndex: 'type', key: 'type', customRender: ({ text }) => { const typeMap = { complaint: '投诉', praise: '表扬', exposure: '曝光' }; return typeMap[text] || text; } }, { title: '状态', dataIndex: 'status', key: 'status', customRender: ({ text }) => { const statusMap = { '0': '待处理', '1': '处理中', '2': '已完成' }; return statusMap[text] || text; } }, { title: '创建时间', dataIndex: 'createTime', key: 'createTime' }, { title: '处理人', dataIndex: 'handler', key: 'handler' } ]); // 组件挂载 onMounted(() => { handleSearch(queryModel); }); </script>

<!-- ComplexQueryForm.vue --> <template> <div> <a-form :model="formData" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-row :gutter="24"> <template v-for="field in visibleFields" :key="field.key"> <a-col v-bind="getFieldColProps(field)"> <a-form-item :label="field.label" :name="field.key"> <component :is="getFieldComponent(field)" v-model:value="formData[field.key]" v-bind="field.props" :placeholder="field.props?.placeholder" style="width: 100%" /> </a-form-item> </a-col> </template> </a-row> <a-row :gutter="24"> <a-col :span="24"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-375c595788.css">