1、背景

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

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

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

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

2、分析

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

3、實現(xiàn)

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

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>

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

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

廣告

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