前言：

基于ElementUI，在日常开发中，在开发系统的时候，会涉及到表格的查询，很多都是有共同之处，无非是业务不同、字段不同，但是逻辑都是相同的，为此开发公共搜索组件供大家使用，其中还有个树形的公共组件，有兴趣也可以看看。

一、源码部分

1、目录结构

1
2
3
4
5
6
7
8
9
├── components
│   ├── SearchForm
│   │   ├── checkQuarter.vue
│   │   ├── formItem.vue
│   │   ├── index.vue
│   │   ├── numberArea.vue
│   │   └── searchCheckBox.vue
│   └── TreeSelect   // 树形公共组件
│       └── index.vue

2、源码下载：

SearchItem组件源码下载

二、使用部分

1、HTML部分

1
<searchForm :form-options="formOptions" @onSearch="onSearch" />

2、form-options配置

1、基础配置说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[{
  label: '用户名', // label文字
  prop: 'username', // 字段名
  element: 'el-input', // 指定elementui组件
  initValue: '阿黄', // 字段初始值
  placeholder: '请输入用户名', // elementui组件属性
  rules: [{ required: true, message: '必填项', trigger: 'blur' }], // elementui组件属性
  events: { // elementui组件方法
    input (val) {
      console.log(val)
    },
    ...... // 可添加任意elementui组件支持的方法
  }
  ...... // 可添加任意elementui组件支持的属性
}]
  • label 用于绑定给el-form-item上的label，表单项标题
  • prop 用于绑定给el-form-item上的prop，字段名，必填
  • element 指定elementui表单项的组件名，必填
  • initValue 表单项的初始值，可选
  • events 对象，对象里加方法，js原生方法或者elementui表单项组件支持的方法都可以加进去，通过v-on遍历绑定
  • 其他elementui表单项组件支持的属性或者html原生属性都可以添加，常用的例如rules表单校验、placeholder提示，通过v-bind遍历绑定
2、字段说明
element字段 说明
el-input 普通文本框
el-input-number 数字类型文本框
el-select 下拉框
el-date-picker 日期
el-cascader 级联选择器
el-tree-select 树形选择
el-radio 单选项
el-checkbox 多选项
el-number-area 数字范围
el-check-quarter 选择季度

element为el-date-picker时

type字段 说明
datetimerange/daterange 日期范围
monthrange 月份范围
date 日期
dates 多个日期
week 周
year 年

3、按钮组

1、通过props接受一个字符串标识按钮组，目前默认三个

搜索按钮：search、search-icon（带icon的按钮）
导出按钮：export、export-icon（带icon的按钮）
重置按钮：reset、reset-icon（带icon的按钮）

2、通过slot添加自定义按钮

4、使用demo

HTML部分：

1
2
3
4
5
6
<searchForm :form-options="formOptions" btn-items="search-icon export reset-icon" @onSearch="onSearch">
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
</searchForm>

javascript部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
const treeMenuData = [
  {
    'menuId': 1,
    'menuName': '系统管理',
    'childrenList': [
      {
        'menuId': 100,
        'menuName': '用户管理',
        'childrenList': [
          {
            'menuId': 1000,
            'menuName': '用户查询'
          },
          {
            'menuId': 1001,
            'menuName': '用户新增'
          },
          {
            'menuId': 1002,
            'menuName': '用户修改'
          },
          {
            'menuId': 1003,
            'menuName': '用户删除'
          }
        ]
      },
      {
        'menuId': 101,
        'menuName': '角色管理',
        'childrenList': [
          {
            'menuId': 1006,
            'menuName': '角色查询'
          },
          {
            'menuId': 1007,
            'menuName': '角色新增'
          },
          {
            'menuId': 1008,
            'menuName': '角色修改'
          },
          {
            'menuId': 1011,
            'menuName': '删除角色'
          }
        ]
      }
    ]
  }
]
export default {
  components: { SearchForm },
  data() {
    return {
	formOptions: [
        {
          label: '姓名',
          prop: 'name',
          element: 'el-input'
        },
        {
          label: '状态',
          prop: 'status',
          element: 'el-select',
          options: [
            { label: '启用', value: '1' },
            { label: '停用', value: '2' }
          ]
        },
        {
          label: '日期',
          prop: 'timeRange',
          element: 'el-date-picker',
          type: 'date'
        },
        {
          label: '组件',
          prop: 'commp',
          element: 'el-cascader',
          options: cascaderOpt
        },
        {
          label: '菜单',
          prop: 'menu',
          element: 'el-tree-select',
          data: treeMenuData,
          nodeKey: 'menuId',
          multiple: true,
          defaultProps: {
            children: 'childrenList',
            label: 'menuName'
          }
        },
        {
          label: '城市',
          prop: 'city',
          element: 'el-radio',
          options: [
            { label: '北京', value: '1' },
            { label: '上海', value: '2' },
            { label: '广东', value: '3' },
            { label: '杭州', value: '4' }
          ]
        },
        {
          label: '活动性质',
          prop: 'acttype',
          element: 'el-checkbox',
          options: [
            { label: '线上活动', value: 1 },
            { label: '地推活动', value: 2 },
            { label: '品牌活动', value: 3 }
          ]
        },
        {
          label: '签到率',
          prop: 'signper',
          element: 'el-number-area',
          unit: '%'
        },
        {
          label: '活动周期',
          prop: 'actcycle',
          element: 'el-check-quarter',
          options: [
            { label: '第一季度', value: 1 },
            { label: '第二季度', value: 2 },
            { label: '第三季度', value: 3 },
            { label: '第四季度', value: 4 }
          ],
          events: {
            focus() {
              return true
            }
          }
        }
      ]
	}
  },
  methods: {
    // 获取搜索表单提交的数据
    onSearch(val) {
      console.log(val)
    }
  }
}

界面部分：