vue3列表页搜索条件封装

搜索框组件

• 封装常用搜索框组件，类型有：
  • input（默认值)
  • select
  • selectV2 (value/label键值对数组)
  • datePicker
  • year
• 集成新增、修改、删除、导入、导出按钮，支持slot自定义其他按钮
• 封装搜索、重置按钮
• 封装按钮权限
• 封装导入弹框

本例仅列出常用的封装，其他类型的可自行加入

参数

searchOptions属性

用法

 <search-toolref="searchRef":search-options="searchOptions":query-params="queryParams"@query="handleQuery"@reset="handleReset"/>const searchOptions3 = reactive([{ prop: 'code', label: '自动配置编码', },{ prop: 'userName', label: '用户名称', },{ prop: 'year', label: '注册年份', type: 'year', },{ prop: 'type', label: '类型', type: 'select', options: [], },{ prop: 'auditFlag', label: '审核标识', type: 'select', options: [], },
])

这样，一个搜索栏就做好了，有以下好处：

• 格式样式统一；
• 代码简洁；
• 便于维护；

源码

<template>
<!--  搜索区域--><el-form :model="props.queryParams" ref="queryRef" :inline="true" v-show="showSearch2"><el-form-item v-for="(item, index) in props.searchOptions" :key="index" :label="item.label" :prop="item.prop"><el-inputv-if="item.type === 'input' || !item.type"v-model="props.queryParams[item.prop]":placeholder="'请输入' + item.label"clearable:style="`width:${item.width || defaultWidth}px`"@keyup.enter="handleQuery"/><el-selectv-if="item.type === 'select'"v-model="props.queryParams[item.prop]":placeholder="'请选择' + item.label"clearablefilterable:style="`width:${item.width || defaultWidth}px`"><el-optionv-for="dict in item.options":key="dict.value":label="dict.label":value="dict.value"/></el-select><el-select-v2v-if="item.type === 'selectV2'"v-model="props.queryParams[item.prop]":options="item.options"clearablefilterable:style="`width:${item.width || defaultWidth}px`":placeholder="'请选择' + item.label"/><el-date-pickerv-if="item.type === 'datePicker'"v-model="props.queryParams[item.prop]":value-format="item.valueFormat || defaultTimeFormat":format="item.format || defaultTimeFormat"type="daterange"range-separator="-"start-placeholder="开始日期"end-placeholder="结束日期":style="`width:${item.width || 180}px`"></el-date-picker><el-date-pickerv-if="item.type === 'year'"v-model="props.queryParams[item.prop]"type="year"value-format="YYYY":placeholder="'请选择' + item.label":style="`width:${item.width || 120}px`":disabled="item.disabled"/></el-form-item><el-form-item><el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button><el-button icon="Refresh" @click="resetQuery">重置</el-button></el-form-item></el-form>
</template><script setup>
import { getCurrentInstance, ref } from "vue";const props = defineProps({queryParams: { type: Object, required: true, },searchOptions: {type: Array,required: true,default: () => {return []},},showSearch: { type: Boolean, default: true },// 显隐列columns: { type: Array, default: () => [] }
})
const emits = defineEmits(['query', 'reset'])
const { proxy } = getCurrentInstance();
const showSearch2 = ref(props.showSearch)// 默认宽度
const defaultWidth = ref(200)
// 默认时间格式
const defaultTimeFormat = 'YYYY-MM-DD'// 搜索
const handleQuery = () => { emits('query') }// 重置
const resetQuery = () => {proxy.resetForm("queryRef");emits('reset')
}
</script>