1、背景
vue后台管理系统，会有很多表格页面，表格上方会有一些搜索选项。表格直接使用el-table即可，而搜索栏区域每次写起来都很繁琐，且多人开发情况下每个人写的样式都不相同，布局样式无法统一。所以要考虑对搜索栏做一个封装，统一配置引用，提升开发维护效率和界面统一。
完成后效果图：
2、分析 项目使用的是elementui框架，搜索栏这种表单提交，首先要使用el-form组件来封装，而复杂点就是表单项可能有很多种，例如input输入框、select选择框、日期时间选择框、日期时间范围选择框、cascader级联选择框等，每一项的字段名prop、名称label、绑定的属性方法都不尽相同。所以不能通过普通的绑定个别属性的方式来处理，而slot插槽的方式也无法简化，最终决定通过传递一个配置项数组的形式来解析生成相应的结构。
3、实现 目前实现的方式由两部分组成，一部分是form表单组件，接受父组件传递的配置项数组，一部分是封装一些常用的表单项组件，通过v-if来控制，form表单组件里引入该表单项组件，循环遍历，根据传递的表单项类型来匹配显示具体的表单项。 4、完整代码
（1）、form表单组件（searchForm.vue）代码
/**
* 表单匹配项
*/
v-if="isInput" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" :placeholder="itemOptions.placeholder" > v-if="isInputNumber" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" :controls-position="itemOptions['controls-position'] || 'right'" > v-if="isSelect" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" clearable > v-for="item in itemOptions.options" :key="item.value" :label="item.label" :value="item.value" > v-if="isDatePickerDateRange" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" :type="itemOptions.type || 'datetimerange'" clearable :picker-options="pickerOptionsRange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" > v-if="isDatePickerMonthRange" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" :type="itemOptions.type" clearable :picker-options="pickerOptionsRangeMonth" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" value-format="yyyy-MM" > v-if="isDatePickerOthers" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" :type="itemOptions.type" clearable value-format="yyyy-MM-dd" placeholder="请选择日期" style="width: 300px" > v-if="isCascader" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" size="mini" clearable >
（2）、formItem表单项组件（formItem.vue）代码
v-for="(item, index) in formOptions" :key="newKeys[index]" :prop="item.prop" :label="item.label ? item.label + '：' : ''" :rules="item.rules" @keyup.enter.native="onSearch" > v-if="btnItems.includes('search')" size="mini" type="primary" class="btn-search" @click="onSearch" >搜索 > v-if="btnItems.includes('export')" size="mini" type="primary" class="btn-export" @click="onExport" >导出 > >重置 >
（3）、组件使用
vue data里
formOptions: [
{
label: "学号", // label文字
prop: "XH", // 字段名
element: "el-input", // 指定elementui组件
},
{
label: "类型",
prop: "type",
element: "el-select",
options: [
{ label: "给点意见", value: "1" },
{ label: "售后问题", value: "2" },
],
},
{
label: "状态",
prop: "status",
element: "el-select",
options: [
{ label: "给点意见", value: "1" },
{ label: "售后问题", value: "2" },
],
},
{
label: "提交时间",
type: "date",
prop: "timeRange",
element: "el-date-picker",
},
{
label: "学生",
prop: "students",
element: "el-input",
},
],
vue methods里:
methods: {
// 获取搜索表单提交的数据
onSearch (val) {
console.log(val)
const this.queryParams = Object.assign(this.queryParams, val); // 搜索表格数据
}
}
好文链接
您阅读本篇文章共花了：
发表评论