el-form多層級(jí)表單的實(shí)現(xiàn)示例-創(chuàng)新互聯(lián)

前言

成都創(chuàng)新互聯(lián)公司秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，做網(wǎng)站、成都做網(wǎng)站，微信小程序定制開發(fā)，網(wǎng)頁設(shè)計(jì)制作，移動(dòng)網(wǎng)站建設(shè)，成都全網(wǎng)營銷推廣幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長。

本篇文章基于 vue、element-ui

需求

前端開發(fā)過程中，經(jīng)常遇到表單開發(fā)的需求，element-ui 為我們帶來了極大的便利，前端只需要更專注于前端邏輯。

我們往往會(huì)遇到相對(duì)復(fù)雜的表單，比如下面的表單:

我們?cè)O(shè)計(jì)的時(shí)候可以把它設(shè)計(jì)成 3 級(jí)表單，即劃分表單到每一個(gè)校驗(yàn)項(xiàng)(輸入框，下拉框的等)

最終實(shí)現(xiàn)效果如下圖所示:

實(shí)現(xiàn)

el-form 使用，詳情可參見： Form 表單

有幾個(gè)比較重要的屬性：

• ref 相當(dāng)于標(biāo)簽的 id
• model 表單數(shù)據(jù)對(duì)象
• rules 表單驗(yàn)證規(guī)則
• prop 表單域 model 字段
• label 標(biāo)簽文本

在提交按鈕的時(shí)候，執(zhí)行validate方法即可；實(shí)時(shí)校驗(yàn)可在rules中設(shè)置校驗(yàn)項(xiàng) trigger: 'change'即可

1.el-form 設(shè)計(jì)

劃分表單到每一個(gè)校驗(yàn)項(xiàng)(輸入框，下拉框的等)，可以設(shè)計(jì)成 3 級(jí)表單

獎(jiǎng)勵(lì)設(shè)置 這一個(gè)校驗(yàn)項(xiàng)稍微復(fù)雜一點(diǎn)，可以動(dòng)態(tài)綁定 model 和 rules 實(shí)現(xiàn)子項(xiàng)的表單校驗(yàn)

<!-- 一級(jí)表單 -->
<el-form class="form" ref="form" :model="form" :rules="form_rules" size="small">
 <el-form-item label="紅包活動(dòng)標(biāo)題" prop="name">
 <el-input v-model='form.name' placeholder="請(qǐng)輸入紅包活動(dòng)標(biāo)題（活動(dòng)展示）" />
 </el-form-item>
 <el-form-item :label="`獎(jiǎng)勵(lì)設(shè)置(${form.seconde_form.length}/${max_reward_module_num})`" prop="seconde_form">
 <el-card class="reward_module" v-for="(second_form, second_form_index) in form.seconde_form" :key="`${second_form_index}_second_form`">
  <!-- 二級(jí)表單 -->
  <el-form class="second_form" :ref="`second_form_${second_form_index}`" :model="second_form" :disabled="is_form_item_disabled" inline size="small">
  <el-form-item prop="packet_name" :key="`${second_form_index}_packet_name`" :rules="[{ required: true, message: '請(qǐng)輸入獎(jiǎng)勵(lì)名稱', trigger: 'change' }]" >
   <el-input v-model="second_form.packet_name" />
  </el-form-item>
  </el-form>
 </el-card>
 </el-form-item>
</el-form>

文章題目：el-form多層級(jí)表單的實(shí)現(xiàn)示例-創(chuàng)新互聯(lián)
標(biāo)題URL：http://muchs.cn/article34/dpoppe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、App開發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(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)