vue3列表页搜索条件封装

搜索框组件

• 封装常用搜索框组件，类型有：
  • 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-tool
   ref="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-input
        v-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-select
        v-if="item.type === 'select'"
        v-model="props.queryParams[item.prop]"
        :placeholder="'请选择' + item.label"
        clearable
        filterable
        :style="`width:${item.width || defaultWidth}px`"
      >
        <el-option
          v-for="dict in item.options"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>

      <el-select-v2
        v-if="item.type === 'selectV2'"
        v-model="props.queryParams[item.prop]"
        :options="item.options"
        clearable
        filterable
        :style="`width:${item.width || defaultWidth}px`"
        :placeholder="'请选择' + item.label"
      />

      <el-date-picker
        v-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-picker
        v-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>