快捷導(dǎo)航

Element中el-form表單舉例詳解

更新時(shí)間：2023年01月03日 12:01:48 作者：程序員大陽(yáng)

Form組件提供了表單驗(yàn)證的功能,只需要通過屬性傳入約定的驗(yàn)證規(guī)則,并將Form-Item的屬性設(shè)置為需校驗(yàn)的字段名即可,下面這篇文章主要給大家介紹了關(guān)于Element中el-form表單的相關(guān)資料,需要的朋友可以參考下

1. 前言

表單是使用頻率非常高的組件了，HTML默認(rèn)提供的表單是沒啥樣式的，而Element對(duì)表單提供了封裝形成了el-form組件，使整個(gè)表單的樣式整齊劃一。

本篇就來(lái)介紹下表單的使用，主要介紹的是樣式方面的使用。

2. 基本用法

代碼：

	基本用法：
    <el-form ref="form" label-width="80px" style="border:1px solid #C4E1C5;padding:20px;">
      <el-form-item label="姓名">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="班級(jí)">
        <el-select v-model="user.classId">
          <el-option label="1班" value="1001"></el-option>
          <el-option label="2班" value="1002"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-date-picker type="date" placeholder="選擇日期" v-model="user.date"></el-date-picker>
      </el-form-item>
      <el-form-item label="性別">
        <el-radio-group v-model="user.sex">
          <el-radio label="男" value="male"></el-radio>
          <el-radio label="女" value="female"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="自我介紹">
        <el-input type="textarea" v-model="user.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

需要用el-form標(biāo)簽將表單控件包裹起來(lái)，每個(gè)控件使用el-form-item標(biāo)簽包裹起來(lái)，這樣產(chǎn)生的表單就會(huì)比較整齊。

3. 行內(nèi)表單

有時(shí)候希望將表單的控件盡量顯示到一行，以節(jié)約空間，借助inline屬性即可實(shí)現(xiàn)。

行內(nèi)表單：
    <el-form ref="form" label-width="80px" :inline="true" style="border:1px solid #C4E1C5;padding:20px;">
      <el-form-item label="姓名">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="選擇班級(jí)">
        <el-select v-model="user.classId">
          <el-option label="1班" value="1001"></el-option>
          <el-option label="2班" value="1002"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

效果如下：

4. 標(biāo)簽對(duì)齊方式

可以統(tǒng)一控制表單控件標(biāo)簽文本的對(duì)齊方式，包括左對(duì)齊、右對(duì)齊、頂部對(duì)齊，通過將label-position屬性值設(shè)置為left/right/top即可實(shí)現(xiàn)，具體效果如下：

5. 調(diào)整尺寸

可以通過為表單設(shè)置size屬性，一次性設(shè)置表單內(nèi)所有控件的屬性，size可取值為medium / small / mini。

如下代碼：

	調(diào)整尺寸：
    <el-form ref="form" label-width="80px" size="mini" style="border:1px solid #C4E1C5;padding:20px;">
      <el-form-item label="姓名">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="選擇班級(jí)">
        <el-select v-model="user.classId">
          <el-option label="1班" value="1001"></el-option>
          <el-option label="2班" value="1002"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

效果如下，與正常尺寸相比，控件都變小了。

6. 小結(jié)

el-form除了提供樣式方面的功能，也提供了校驗(yàn)方面的功能，我個(gè)人還是比較喜歡使用JS代碼進(jìn)行校驗(yàn)，所以此處不再介紹，感興趣的可以去官網(wǎng)查看文檔。

補(bǔ)充知識(shí)：表單的重置清除和觸發(fā)

resetFields方法：可移除校驗(yàn)結(jié)果并重置字段值（注：清除表單項(xiàng)name的校驗(yàn)及數(shù)值）
clearValidate方法：只能移除校驗(yàn)結(jié)果，不能重置字段值（注：只清除表單項(xiàng)name的校驗(yàn)，不清除表單項(xiàng)name的數(shù)值）

//重置整個(gè)表單
this.$refs['ruleForm'].resetFields();
//清除整個(gè)表單
this.$refs['ruleForm'].clearValidate();
//清除特定屬性
this.$refs['ruleForm'].clearValidate('name');
 validateField()方法：觸發(fā)表單中某一個(gè)校驗(yàn)
//觸發(fā)單個(gè)表單驗(yàn)證
this.$refs.form.validateField('propName')
 //element官網(wǎng) 觸發(fā)一個(gè)表單的驗(yàn)證
this.$refs[formName].validate((valid) => {
   if (valid) {
     alert('submit!');
   } else {
     console.log('error submit!!');
     return false;
   }
});

到此這篇關(guān)于Element中el-form表單舉例詳解的文章就介紹到這了,更多相關(guān)Element el-form表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: