搜索框组件
- 封装常用搜索框组件，类型有：
- input（默认值)
- select
- selectV2 (value/label键值对数组)
- datePicker
- year
- 集成新增、修改、删除、导入、导出按钮，支持slot自定义其他按钮
- 封装搜索、重置按钮
- 封装按钮权限
- 封装导入弹框
本例仅列出常用的封装，其他类型的可自行加入
参数
| 名称 | 类型 | 必传 | 说明 |
|---|---|---|---|
| queryParams | Object | true | 搜索框的变量值 |
| searchOptions | Array | true | 搜索框显示的值及参数类型，具体见下表 |
| showSearch | Boolean | false | 是否显示右侧搜索功能组 |
| btnList | Array | false | 按钮组，默认值：[‘add’, ‘edit’, ‘remove’, ‘import’, ‘export’] |
| single | Boolean | false | 单选 |
| multiple | Boolean | false | 多选 |
| authPreFix | String | false | 权限前缀 |
| exportUrl | String | false | 导出url，可优化省略掉 |
| title | String | false | 导出名称 |
searchOptions属性
| 名称 | 默认值 | 可选 | 说明 |
|---|---|---|---|
| label | 表单名称 | ||
| prop | 参数名称 | ||
| type | input | select、selectV2、datePicker、year | 类型 |
| width | 200 | 宽度 | |
| options | 选项 | ||
| valueFormat | 日起值格式 | ||
| disabled | 是否禁用 |
用法
<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>