vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一。
所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一。
完成后的效果大概就是长这样:
项目使用的是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
}
