vue element 管理系统搜索表单收起展开组件

SearchFormConfig

1.为了解决后台管理系统搜索条件过多，一屏内表格展示内容过少问题封装了这个动态配置搜索表单内容

安装

npm i search-form-config

使用

在vue main.js

import searchFormConfig from 'search-form-config'
Vue.use(searchFormConfig)

<search-form-config
    :form-item-list="formItemList" // 表单属性配置
    :row="2" // 显示几行
    size="mini"
    label-width="100px"
    @getSearchFormData="getSearchFormData" // 表单数据回调
  />

form.gif

配置

[
        {
          type: 'input',
          turnLabel: true, // form的label 可以切换的
          model: 'model1',
          label: '销售单号',
          placeholder: '1231',
          initialValue: '',
          dropdownType: 'test',
          attrs: {
            options: [
              {
                model: 'model1',
                label: '销售单号',
                placeholder: '1231',
                initialValue: ''
              },
              {
                model: 'model2',
                label: '来源单据号',
                placeholder: '1231333',
                initialValue: ''
              }
            ]
          }
        },
        {
          type: 'input', // 正常的input
          label: '名称', // label名称
          model: 'test', // 对应的字段名称
          initialValue: '123' // 初始值
        },
        {
          type: 'date', // 日期格式
          label: '名称1',
          model: 'test1',
          initialValue: [], // 为范围时，初始值要为[] 知识单个的时，初始值需为 ''
          turnKey: true, // 为范围时需要转换开始和结束时间的字段吗
          change: this.dateChange, // 选中时回调
          attrs: {
            type: 'daterange', // 具体日期选择器格式
            format: 'yyyy-MM-dd', // 展示格式
            valueFormat: 'timestamp', // 数据格式
            begin: 'beginDate1', // 转换的开始时间字段
            end: 'endDate1', // 转换的结束时间字段
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            rangeSeparator: '至'
          },
          span: 12
        },
        {
          type: 'date',
          label: '日期',
          model: 'datessss',
          initialValue: '',
          attrs: {
            type: 'date',
            format: 'yyyy-MM-dd',
            valueFormat: 'timestamp'
          },
          span: 6
        },
        {
          type: 'select', // 选择框
          label: '名称4',
          model: 'test4',
          initialValue: [], // 初始值为[] 是多选，初始值为'' 是单选
          change: this.selectChange, // 选中时回调
          options: [
            {
              label: '测试1测试1测试1测试1测试1测试1',
              value: 'q123'
            },
            {
              label: '测试2',
              value: 'q'
            }
          ],
          span: 6
        },
        {
            type: 'range', // 范围选择
            label: '名称6',
            model: 'minModel', // 最小值
            maxModel: 'maxModel', // 最大值
            initialValue: '', // 最小值的初始值
            maxInitialValue: '', // 最大值的初始值
            separator: '至',
            placeholder: '请输入',
            maxPlaceholder: '请输入',
            span: 6
        },
        {
          type: 'select',
          label: '名称7',
          model: 'test7',
          initialValue: '',
          options: [
            {
              label: '测试1测试1测试1测试1测试1测试1',
              value: 'q123'
            },
            {
              label: '测试2',
              value: 'q'
            }
          ],
          span: 6
        },
        {
          type: 'date',
          label: '名称8',
          model: 'test8',
          initialValue: [],
          attrs: {
            type: 'daterange',
            format: 'yyyy-MM-dd',
            valueFormat: 'timestamp',
            begin: 'beginDate',
            end: 'endDate',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            rangeSeparator: '至'
          },
          span: 12
        }
      ]