Vuejs+ElementUI實現可配置的動態表單配置

實現目標：將後臺管理系統中的表單部分從新渲染實現成可配置的（經過數據庫配置），動態的。須要支持系統中的全部附帶搜索項的頁面（如輸入框、下拉框、日期、單選框等）

需求目標

• 封裝可複用的組件須要根據後臺數據渲染搜索模塊
• 篩選條件需隨配置表格列的內容可動態變化

方案

封裝出公共搜索模塊組件，使用與系統的各個有搜索功能的頁面

將搜索、重置、收起功能放在一個組件DynamicForm內，將搜索項放在另外一個組件DynamicFormItem。此處須要封裝兩個互爲父子關係的組件。所需頁面只是經過調用DynamicForm組件來展現form表單內容。

須要指定一個通用的配置信息的數據結構渲染組件頁面。

數據結構

組件接受的數據以下：

與以前的原系統保持一致，渲染組件時請求獲取下拉框的數據（包括請求接口返回的數據和獲取的常量）

搜索欄中所需的數據格式

searchParams:搜索對象，以系統管理頁面爲例。

{
    currentPage：1,
    pageSize:10,
    employeeName: 'fei',
    userName:'h',
    sex:'SEX_MALE',
    deptId:'11',
    positionId:'987',
    userStatus:'USER_STATUS_FORBIDDER'
}複製代碼

表單搜索欄配置所需的數據結構

config對象，描述當前頁面的form表單狀況，渲染實際展現的搜索欄。以管理系統通用的用戶頁面爲例。

config:{
    attrs:{
        'inline':false,
        'labelPostion':'right',
        'labelWidth':'70px',
        'size':'small',
        'stateIcon':true
    },
    layout:[               {                   attrs:{                       gutter:0                   },                   formItem:[                       {                           itemAttrs:{                               'type':'input',                               'label':'姓名',                               'disable':false,                               'readonly':false,                               'placeholder':'請輸入姓名',                               'rules':[],                               'key':'employeeName',                               'subtype':'text',                               'value':''                           }                       }                   ]               },               {                attrs:{                    gutter:0                },                formItem:[                    {                        itemAttrs:{                            'type':'select',                            'label':'性別',                            'disable':false,                            'readonly':false,                            'placeholder':'請選擇',                            'rules':[],                            'key':'sex',                            'subtype':'text',                            'value':'',                            'options':[] // 注意此處的數據                        }                    }                ]            },            {             attrs:{                 gutter:0             },             formItem:[                 {                     itemAttrs:{                         'type':'date',                         'label':'截止日期',                         'disable':false,                         'readonly':false,                         'placeholder':'請選擇',                         'rules':[],                         'key':'endDate',                         'value':'',                         'options':[] // 注意此處的數據                     }                 }             ]         }       ]}複製代碼

通用性問題

業務組件調用封裝的組件

此處針對通用的用戶頁面來講，調用封裝的組件

<dynamic-form ref='dynamicForm' :config='config' v-model='object' 
            @putHandle='handleCollapse'            @searchHandleEvent='getListData(1)'     />複製代碼

• 搜索表單

經過v-for循環渲染不一樣搜索項，而且將原來的搜索事件，重置事件，收起事件進行原樣移植

• 控制渲染的搜索項label

根據後臺接口返回的數據渲染搜索條件

搜索表單

封裝的DynamicForm組件上綁定系統中已有的事件，搜索事件、重置事件、收起事件等

<el-form-item v-for="con in config.layout" :key="con.key">
	<div v-for="item in con.formItem" :key="item.itemAttrs.key" class="item-width">
		<dynamic-form-item
			v-if="value[item.itemAttrs.key]!==undefined"
			:key="item.itemAttrs.key"
			:item="item.itemAttrs"
			v-bind="item.itemAttrs"
			:value="value[item.itemAttrs.key]"
			@input="handleInput($event,item.itemAttrs.key)"
		/>
	</div>
</el-form-item>
<el-form-item class="search_btn">
	<!-- 搜索按鈕 -->
	<dr-btn-search @click="searchEvent"/>
	<!-- 重置按鈕 -->
	<dr-btn-search-reset @click="reset"/>
	<!-- 收起按鈕 -->
	<dr-btn-search-cancel @click="putArea"/>
</el-form-item>複製代碼

注意此處的搜索參數與重置參數

搜索事件觸發時調用父組件的搜索接口方法，根據this.object對象獲取相應的參數

重置事件觸發時只須要調用setDefaultValue 方法便可

收起事件觸發時調用父組件的收起方法

控制渲染的搜索項，封裝的DynamicFormItem組件

<template>
    <el-form-item :rules="Rules" :label="item.label" :prop="item.key" class="item-style">
		<dr-input v-if="item.type==='input' v-bind="$attrs" :type="item.type" :placeholder="item.placeholder" :disabled="item.disabled" :readonly="item.readonly" maxlength="48" v-on="$listeners"/> <el-select v-else-if="item.type==='select' v-bind="$attrs"
		:multiple="item.multiple"
		:disabled="item.disabled"
		clearable
		v-on="$listeners">
			<el-option v-for="o in item.options" :key="o.key||o.id" 
			:label="o.label||o.lookupName" :value="o.value||o.lookupCode"/>
		</el-select>
		<el-date-picker v-else-if="item.type==='date' v-bind="$attrs" :type="item.type" :placeholder="item.placeholder" clearable v-on="$listeners"/> </el-form-item> </template>複製代碼

後期擴展性

還能夠擴展出checkbox,radio,time等