原創(chuàng)/朱季謙

最近通過Vue + Element ui實現(xiàn)了動態(tài)表單功能，該功能還包括了動態(tài)表單新增行、刪除行、動態(tài)表單驗證、動態(tài)表單提交功能，趁熱打鐵，將開發(fā)心得記錄下來，方便以后再遇到類似功能時，直接拿來應(yīng)用。

簡化的頁面效果圖如下：

最開始，我是用了純粹的表格形式，后來發(fā)現(xiàn)，這種形式在提交的時候，不好對每個輸入框做校驗，若是表單形式話，就可以直接通過rule設(shè)置每個輸入框的驗證，因此，我就在表格里面嵌套了表單。注意一點是，el-form-item里的 :prop="scope.$index + '.name'"需要對應(yīng)el-input的 v-model="studentData[scope.$index].name"，兩者都是同一個字段值。

<template>
  <div >
        <div>
          <div>
            <el-button  size="small"  @click="addRow">新增</el-button>
          </div>
          <!--設(shè)置的表單-->
          <el-form :model="studentData" ref="data" label-width="auto">
          <el-table
            border
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            :data="studentData"
            ref="table"
            style="width: 100%"
          >

            <el-table-column align="center"   label="姓名">
              <template slot-scope="scope">
              <!--表格里面嵌套表單-->
                <el-form-item
                  :prop="scope.$index + '.name'"
                  :rules="{ required: true, message: '姓名不能為空', trigger: 'blur' }"
                >
                <el-input
                  v-model="studentData[scope.$index].name"
                  autocomplete="off"
                  size="small"
                  placeholder="姓名"
                ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center"  label="年齡">
              <template slot-scope="scope">
                  <el-form-item
                    :prop="scope.$index + '.age'"
                    :rules="{ required: true, message: '年齡不能為空', trigger: 'blur' }"
                  >
                <el-input
                  v-model="studentData[scope.$index].age"
                  autocomplete="off"
                  size="small"
                  type='number'
                  placeholder="收款方開戶行號"
                ></el-input>
                  </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center"  label="性別">
              <template slot-scope="scope">
                <el-form-item
                  :prop="scope.$index + '.sex'"
                  :rules="{ required: true, message: '性別不能為空', trigger: 'blur' }"
                >
                <el-input
                  v-model="studentData[scope.$index].sex"
                  autocomplete="off"
                  size="small"
                  placeholder="性別"
                ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleDeleteRow(studentData[scope.$index])"
                  type="text"
                  size="small"
                >刪除</el-button
                >
              </template>
            </el-table-column>
            
          </el-table>
          </el-form>
        </div>
        
        <div slot="footer" class="dialog-footer" style="margin-bottom: 10px">
          <el-button size="mini"  @click="submit">提交</el-button>
          <el-button size="mini" @click="resetForm()">重置</el-button>
        </div>
  </div>
</template>

定義一個存儲動態(tài)表格數(shù)據(jù)的數(shù)組變量

export default {
  data() {
    return {
      studentData:[],
    };
  },
  ......
}

在methods方法里增加相關(guān)方法，分別是新增行、刪除行、提交——

methods:{

  /**
   * 新增行
   */
  addRow() {
    let index = this.studentData.length ;
    this.studentData.push({
      key: index,
      name:'',
      age:'',
      sex:'',
    });
  },

  /**
   * 刪除行
   * @param row
   */
  handleDeleteRow(row){
    let datas = this.studentData;
    for (var i = 0; i < datas.length; i++){
      if (datas[i].key == row.key){
        datas.splice(i,1);
      }
    }
  },

  /**
   * 提交
   */
  submit() {
    this.$refs["data"].validate(valid => {
      //valid為true，表示表單都已經(jīng)驗證通過，若為false，說明存在表單驗證失敗
        if (valid) {
          save(this.studentData).then(response => {
            this.$message({
              message: '提交成功',
              type: 'success'
            });
          });
        }
    });
  },

  /**
   * 重置
   */
  resetForm() {
    let datas = this.studentData;
    for (var i = 0; i < datas.length; i++){
      datas[i].name='';
      datas[i].age='';
      datas[i].sex='';
    }
  },
}

設(shè)置表單驗證規(guī)則，可統(tǒng)一在rules設(shè)置，也可以在每一輸入框單獨設(shè)置，我這里是單獨在每一個輸入框里設(shè)置，即:rules="{ required: true, message: '姓名不能為空', trigger: 'blur' }"就可以了，當(dāng)然，還可以做一些更復(fù)雜的自定義規(guī)則。

<el-table-column align="center"   label="姓名">
          <template slot-scope="scope">
          <!--表格里面嵌套表單-->
            <el-form-item
              :prop="scope.$index + '.name'"
              :rules="{ required: true, message: '姓名不能為空', trigger: 'blur' }"
            >
            <el-input
              v-model="studentData[scope.$index].name"
              autocomplete="off"
              size="small"
              placeholder="姓名"
            ></el-input>
            </el-form-item>
          </template>
        </el-table-column>

完成以上步驟，就可以快速寫出一個基于Vue + Element ui 實現(xiàn)動態(tài)表單，包括新增行/刪除行/動態(tài)表單驗證/提交功能的邏輯。文章來源地址http://www.zghlxwxcb.cn/news/detail-759332.html

到了這里，關(guān)于Vue + Element ui 實現(xiàn)動態(tài)表單，包括新增行/刪除行/動態(tài)表單驗證/提交功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！