vue elementui实现搜索栏公共组件封装的实例代码

  

  

vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一。

  

所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一。

  

完成后的效果大概就是长这样:

  

 vue elementui实现搜索栏公共组件封装的实例代码

  

  

项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如输入输入框,选择选择框,日期时间选择框,日期时间范围选择框,级联级联选择框等,每一项的字段名道具,名称标签,绑定的属性方法都不尽相同,所以不能通过普通的绑定个别属性的方式来处理,而槽插槽的方式也无法简化,最终决定通过传递一个配置项数组的形式来解析生成相应的结构。

  

  

目前实现的方式由两部分组成,一部分是形式表单组件,接受父组件传递的配置项数组,一部分是封装一些常用的表单项组件,通过v来控制,形成表单组件里引入该表单项组件,循环遍历,根据传递的表单项类型来匹配显示具体的表单项。

  

形式表单组件(searchForm.vue)示例代码:

        & lt; el-form   :模型=" formData "   ref=" formRef "   :内联=" true "   比;   & lt; el-form-item   v代表="(项目,索引)formOptions”   :关键=" newkey(指数)”   :支持=" item.prop”   :label="项目。标签& # 63;(项目。标签+‘:’):“   :规则=" item.rules”   比;   & lt; formItem   v模型=" formData [item.prop]”   :itemOptions="项目"/比;   & lt;/el-form-item>   & lt;/el-form>      

formItem表单项组件(formItem.vue)示例代码:

  

        & lt; el-input   v=" isInput "   v模型=" currentVal "   v-bind=" bindProps "   v=" bindEvents "   大?"迷你"   祝辞& lt;/el-input>      & lt; el-select   v=" isSelect "   v模型=" currentVal "   v-bind=" bindProps "   v=" bindEvents "   大?"迷你"   可清除的   比;   & lt; el-option   v代表=癷temOptions.options项目”   :关键=" item.value "   :label=" item.label "   :value=" https://www.yisu.com/zixun/item.value "   祝辞& lt;/el-option>   & lt;/el-select>      

  

  

由于elementui表单组件本身有很多配置属性,不可能把所有的属性和方法都写死封装,要想无缝支持,需要用到vue的v-bind和v的特性,vue的v-bind和v的支持赋值为对象类型,vue会自动遍历对象里的属性依次绑定,v2.4.0 +支持。

  

  

(1)示例:
  

        [{   标签:“用户名',//标签文字   道具:“用户名”,//字段名   元素:“el-input”//指定elementui组件   initValue:“阿黄”,//字段初始值   占位符:“请输入用户名',//elementui组件属性   规则:[{要求:真的,信息:“必填”项,触发:‘模糊’}],//elementui组件属性   事件:{//elementui组件方法   输入(val) {   console.log (val)   },   }   }]      

标签用于绑定给el-form-item上的标签,表单项标题
  道具用于绑定给el-form-item上的道具,字段名,必填
  元素指定elementui表单项的组件名,必填
  initValue表单项的初始值,可选
  事件对象,对象里加方法,js原生方法或者elementui表单项组件支持的方法都可以加进去,通过v在遍历绑定
  …其他elementui表单项组件支持的属性或者html原生属性都可以添加,常用的例如规则表单校验,占位符提示,通过v-bind遍历绑定

  

(2)参数传递解析的流程:

  

首先,searchForm.vue组件里通过道具接收参数:

        formOptions: {   类型:数组,   要求:没错,   默认(){   返回[]   }   },      

  

创建组件里处理初始值:

  

     //添加初始值   addInitValue () {   const obj={}   this.formOptions。forEach (v=比;{   如果(v。initValue !==未定义){   obj [v。道具]=v.initValue   }   })   这一点。formData=https://www.yisu.com/zixun/obj   }      

vue elementui实现搜索栏公共组件封装的实例代码