vue2-search

Vue2 自定义搜索表单组件（基于 Element UI），支持多种表单类型，提供展开/收起功能，方便快速构建搜索表单。

安装

npm install @shiyougang/vue2-search

使用

全局注册

import Vue from 'vue'
import App from './App.vue'
import SearchForm from '@shiyougang/vue2-search'

Vue.use(SearchForm)

new Vue({
  render: h => h(App)
}).$mount('#app')

局部注册

import { SearchForm } from '@shiyougang/vue2-search'

export default {
  components: {
    SearchForm
  }
}

基础示例

<template>
  <SearchForm
    :formData="formData"
    :formSearchData="formSearchData"
    :labelWidth="'130px'"
    :immemiate="false"
    :searchBorder="true"
    @searchFun="handleSearch"
    @change="handleChange"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: {
          label: '姓名',
          type: 'input',
          placeholder: '请输入姓名',
          defaultValue: ''
        },
        status: {
          label: '状态',
          type: 'select',
          placeholder: '请选择状态',
          options: [
            { value: '1', label: '启用' },
            { value: '0', label: '禁用' }
          ],
          defaultValue: ''
        },
        dateRange: {
          label: '日期范围',
          type: 'daterange',
          defaultValue: [],
          splitFields: ['startDate', 'endDate']
        }
      },
      formSearchData: {}
    }
  },
  methods: {
    handleSearch(searchData) {
      console.log('搜索条件:', searchData)
    },
    handleChange(val, key) {
      console.log(`${key} 变更为:`, val)
    }
  }
}
</script>

完整示例

<template>
  <SearchForm
    :formData="formData"
    v-model="formSearchData"
    :labelWidth="'120px'"
    :size="'small'"
    :borderColor="'#dcdfe6'"
    @searchFun="handleSearch"
    @toggleForm="handleToggle"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        keyword: {
          label: '关键词',
          type: 'input',
          placeholder: '请输入关键词',
          defaultValue: '',
          clearable: true
        },
        type: {
          label: '类型',
          type: 'select',
          placeholder: '请选择类型',
          filterable: true,
          clearable: true,
          data: [
            { value: '1', label: '类型一' },
            { value: '2', label: '类型二' },
            { value: '3', label: '类型三' }
          ],
          defaultValue: ''
        },
        amount: {
          label: '金额',
          type: 'inputNum',
          placeholder: '请输入金额',
          thousands: true,
          defaultValue: ''
        },
        amountRange: {
          label: '金额范围',
          type: 'inputNumRange',
          placeholder1: '最小金额',
          placeholder2: '最大金额',
          defaultValue: []
        },
        dateRange: {
          label: '时间范围',
          type: 'daterange',
          defaultValue: [],
          splitFields: ['startDate', 'endDate']
        },
        dateTimeRange: {
          label: '日期时间范围',
          type: 'datetimerange',
          defaultValue: []
        },
        month: {
          label: '月份',
          type: 'month',
          defaultValue: ''
        },
        year: {
          label: '年度',
          type: 'year',
          defaultValue: ''
        },
        user: {
          label: '用户',
          type: 'select-user',
          clearable: true,
          defaultValue: ''
        }
      },
      formSearchData: {}
    }
  },
  methods: {
    handleSearch(searchData) {
      console.log('搜索:', searchData)
    },
    handleToggle() {
      console.log('展开/收起')
    }
  }
}
</script>

API

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | formData | Object | {} | 表单配置数据 | | formSearchData | Object | {} | 表单搜索数据（双向绑定） | | labelWidth | String | "130px" | 标签宽度 | | immemiate | Boolean | false | 是否初始化时立即触发搜索 | | reset | Boolean | false | 是否重置表单（外部触发） | | size | String | "medium" | 表单尺寸（medium/small/mini） | | borderColor | String | "#e4e7ed" | 边框颜色 | | borderWidth | String | "1px" | 边框宽度 | | borderStyle | String | "solid" | 边框样式 |

formData 字段配置

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | label | String | 是 | 字段标签 | | type | String | 是 | 字段类型（见下方支持的表单类型） | | placeholder | String | 否 | 占位提示 | | defaultValue | Any | 否 | 默认值 | | clearable | Boolean | 否 | 是否可清空 | | filterable | Boolean | 否 | 是否可搜索（select 类型） | | multiple | Boolean | 否 | 是否多选（select 类型） | | collapseTags | Boolean | 否 | 是否折叠多选标签 | | data | Array | 否 | 下拉选项（select 类型，格式：[{value, label}]） | | splitFields | Array | 否 | 日期范围拆分字段，如 ['startDate', 'endDate'] | | thousands | Boolean | 否 | 是否开启千位符格式（inputNum/inputNumRange 类型） | | placeholder1 | String | 否 | 范围输入框第一个输入框的占位提示 | | placeholder2 | String | 否 | 范围输入框第二个输入框的占位提示 | | maxlength | Number | 否 | 最大输入长度 | | showWordLimit | Boolean | 否 | 是否显示字数统计 |

Events

| 事件名 | 说明 | 参数 | |--------|------|------| | searchFun | 查询或重置时触发 | searchData - 当前搜索条件 | | change | 字段值变更时触发 | (val, key) - 值和字段名 | | toggleForm | 展开/收起时触发 | 无 |

双向绑定

<SearchForm
  :formData="formData"
  v-model="formSearchData"
/>

支持的表单类型

| 类型 | 说明 | 特殊属性 | |------|------|----------| | input | 文本输入框 | placeholder, clearable, maxlength, showWordLimit | | inputNum | 数字输入框（支持千位符） | thousands, placeholder, clearable | | inputNumRange | 数字范围输入框 | placeholder1, placeholder2, clearable | | input2 | 双输入框范围 | endText, clearable | | select | 下拉选择框 | data, filterable, clearable, multiple, collapseTags | | selectGroup | 分组下拉选择框 | data（格式：[{label, options}]） | | select-user | 用户选择器（远程搜索） | clearable | | date | 日期选择器 | - | | daterange | 日期范围选择器 | splitFields | | month | 月份选择器 | - | | monthrange | 月份范围选择器 | splitFields | | year | 年份选择器 | - | | years | 多年份选择器 | - | | datetimerange | 日期时间范围选择器 | splitFields | | daterangeToM | 日期范围（返回月份格式） | splitFields | | datetimerangeAndWeekMonth | 日期时间范围（含快捷选择） | - |

千位符格式

对于 inputNum 和 inputNumRange 类型，可以开启千位符格式：

amount: {
  label: '金额',
  type: 'inputNum',
  placeholder: '请输入金额',
  thousands: true,
  defaultValue: ''
}

组件会自动处理千位符的显示和去除，提交时会自动去除千位符。

日期范围拆分

对于日期范围类型（daterange, monthrange, datetimerange），可以配置 splitFields 将范围值拆分为两个独立字段：

dateRange: {
  label: '日期范围',
  type: 'daterange',
  defaultValue: [],
  splitFields: ['startDate', 'endDate']
}

提交时会自动将 dateRange: ['2024-01-01', '2024-01-31'] 转换为 startDate: '2024-01-01', endDate: '2024-01-31'。

展开/收起功能

当表单字段数量超过 3 个时，组件会自动显示展开/收起按钮，默认收起状态只显示前 3 个字段。

依赖

• Vue 2.x
• Element UI 2.15+

开发

# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 构建生产版本
npm run build

# 构建库
npm run lib

License

MIT