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

前言

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

本篇文章基于 vue、element-ui

需求

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

我們往往會遇到相對復雜的表單，比如下面的表單:

我們設計的時候可以把它設計成 3 級表單，即劃分表單到每一個校驗項(輸入框，下拉框的等)

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

實現(xiàn)

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

有幾個比較重要的屬性：

• ref 相當于標簽的 id
• model 表單數(shù)據(jù)對象
• rules 表單驗證規(guī)則
• prop 表單域 model 字段
• label 標簽文本

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

1.el-form 設計

劃分表單到每一個校驗項(輸入框，下拉框的等)，可以設計成 3 級表單

獎勵設置 這一個校驗項稍微復雜一點，可以動態(tài)綁定 model 和 rules 實現(xiàn)子項的表單校驗

<!-- 一級表單 -->
<el-form class="form" ref="form" :model="form" :rules="form_rules" size="small">
 <el-form-item label="紅包活動標題" prop="name">
 <el-input v-model='form.name' placeholder="請輸入紅包活動標題（活動展示）" />
 </el-form-item>
 <el-form-item :label="`獎勵設置(${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`">
  <!-- 二級表單 -->
  <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: '請輸入獎勵名稱', trigger: 'change' }]" >
   <el-input v-model="second_form.packet_name" />
  </el-form-item>
  </el-form>
 </el-card>
 </el-form-item>
</el-form>

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

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

廣告

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