vue3列表页搜索条件封装

搜索框组件

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

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

参数

searchOptions属性

用法

 <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>