1、背景

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

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

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

完成后的效果大概就是長(zhǎng)這樣：

2、分析

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

3、實(shí)現(xiàn)

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

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實(shí)現(xiàn)搜索欄公共組件封裝的實(shí)例代碼-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://chinadenli.net/article36/dipcsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、企業(yè)網(wǎng)站制作、動(dò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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)