1、背景

專注于為中小企業(yè)提供成都網站設計、網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)羅江免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯網行業(yè)人才，有力地推動了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現規(guī)模擴充和轉變。

vue后臺管理系統，會有很多表格頁面，表格上方會有一些搜索選項，表格直接使用el-table即可，而搜索欄區(qū)域每次寫起來都很繁瑣，而且多人開發(fā)情況下每個人寫的樣式都不相同，布局樣式無法統一。

所以要考慮對搜索欄做一個封裝，統一配置引用，提升開發(fā)維護效率和界面統一。

完成后的效果大概就是長這樣：

2、分析

項目使用的是elementui框架，搜索欄這種表單提交，首先要使用el-form組件來封裝，而復雜點就是表單項可能有很多種，例如input輸入框、select選擇框、日期時間選擇框、日期時間范圍選擇框、cascader級聯選擇框等，每一項的字段名prop、名稱label、綁定的屬性方法都不盡相同。所以不能通過普通的綁定個別屬性的方式來處理，而slot插槽的方式也無法簡化，最終決定通過傳遞一個配置項數組的形式來解析生成相應的結構。

3、實現

目前實現的方式由兩部分組成，一部分是form表單組件，接受父組件傳遞的配置項數組，一部分是封裝一些常用的表單項組件，通過v-if來控制，form表單組件里引入該表單項組件，循環(huán)遍歷，根據傳遞的表單項類型來匹配顯示具體的表單項。

form表單組件（searchForm.vue）示例代碼：

<el-form
 :model="formData"
 ref="formRef"
 :inline="true"
>
 <el-form-item
 v-for="(item, index) in formOptions"
 :key="newKeys[index]"
 :prop="item.prop"
 :label="item.label ? (item.label + '：') : ''"
 :rules="item.rules"
 >
 <formItem
  v-model="formData[item.prop]"
  :itemOptions="item"
 />
 </el-form-item>
</el-form>

網頁名稱：vueelementui實現搜索欄公共組件封裝的實例代碼-創(chuàng)新互聯
標題路徑：http://newbst.com/article36/dipcsg.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站設計、企業(yè)網站制作、動態(tài)網站、云服務器、關鍵詞優(yōu)化、網站導航

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯