快捷導(dǎo)航

el-form 多層級表單的實(shí)現(xiàn)示例

更新時(shí)間：2020年09月10日 14:23:36 作者：小豪看世界

這篇文章主要介紹了el-form 多層級表單的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本篇文章基于 vue、element-ui

需求

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

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

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

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

實(shí)現(xiàn)

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

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

ref 相當(dāng)于標(biāo)簽的 id
model 表單數(shù)據(jù)對象
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 級表單

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

<!-- 一級表單 -->
<el-form class="form" ref="form" :model="form" :rules="form_rules" size="small">
 <el-form-item label="紅包活動標(biāo)題" prop="name">
 <el-input v-model='form.name' placeholder="請輸入紅包活動標(biāo)題（活動展示）" />
 </el-form-item>
 <el-form-item :label="`獎勵(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`">
  <!-- 二級表單 -->
  <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: '請輸入獎勵(lì)名稱', trigger: 'change' }]" style="width:150px;margin-right:20px;">
   <el-input v-model="second_form.packet_name" />
  </el-form-item>
  </el-form>
 </el-card>
 </el-form-item>
</el-form>

2.el-form-item 子項(xiàng)校驗(yàn)

校驗(yàn)比較簡單，只需要獲取到每一個(gè)表單對象，并執(zhí)行validate即可，二級表單就遍歷拿到二級表單獨(dú)享執(zhí)行同樣的操作

定義 form 數(shù)據(jù)模型:

form: {
 name: '',
 seconde_form: [
 {
  packet_name: '',
 },
 ],
},

封裝一個(gè) check_form 方法

/**
 * 表單校驗(yàn)方法
 * @param {String} form_name
 */
function $check_form(form_name) {
 const form_component = this.$refs[form_name][0] ? this.$refs[form_name][0] : this.$refs[form_name];
 return new Promise((resolve, reject) => {
 form_component.validate(valid => {
  if (valid) {
  resolve();
  } else {
  reject();
  }
 });
 });
}

點(diǎn)擊按鈕的時(shí)候執(zhí)行 checkParam 方法

async checkParam(form_name) {
 try {
 await this.$check_form(form_name);
 for (let i = 0; i < this.form.seconde_form.length; i++) {
  await this.$check_form(`second_form_${i}`);
 }
 // next step do something
 } catch (e) {
 console.log(e);
 }
},

到此這篇關(guān)于el-form 多層級表單的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)el-form 多層級表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: