99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

前言

成都創(chuàng)新互聯(lián)公司秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，做網(wǎng)站、成都做網(wǎng)站，微信小程序定制開(kāi)發(fā)，網(wǎng)頁(yè)設(shè)計(jì)制作，移動(dòng)網(wǎng)站建設(shè)，成都全網(wǎng)營(yí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è)和所長(zhǎng)。

本篇文章基于 vue、element-ui

需求

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

我們往往會(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 使用，詳情可參見(jiàn)： 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)

本文名稱：el-form多層級(jí)表單的實(shí)現(xiàn)示例-創(chuàng)新互聯(lián)
瀏覽地址：http://ef60e0e.cn/article/dpoppe.html