element-ui動態新加一行，動態表單驗證

先看效果圖：

以上是一個表單，俱樂部的名稱是必填的；俱樂部成員是一個table數據，至少有一個，且可以點擊添加按鈕添加多個 ，但動態添加的行都需要進行表單驗證。這里演示說明，電話沒有做正則驗證。代碼如下：

<template>
  <el-dialog :visible.sync="dialogVisible" width="50%">
    <el-form ref="myform" :model="myform" label-width="120px" :rules="rules">
      <el-form-item label="俱樂部名稱" prop="jlbName">
        <el-input v-model="myform.jlbName" />
      </el-form-item>
      <el-form-item label="俱樂部成員">
        <el-button icon="el-icon-plus" type="success" size="mini" @click="chickPlus">添加</el-button>
        <el-table :data="myform.userList" align="center">
          <el-table-column label="姓名">
            <template slot-scope="scope">
              <el-form-item :prop="`userList.${scope.$index}.chinaName`" :rules="rules.chinaName">
                <el-input v-model="scope.row.chinaName" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="電話">
            <template slot-scope="scope">
              <el-form-item :prop="`userList.${scope.$index}.phone`" :rules="rules.phone">
                <el-input v-model="scope.row.phone" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleCreate">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

  export default {
    data() {
      return {
        dialogVisible: true,
        myform: {
          jlbName: '',
          userList: [{
            chinaName: '',
            phone: ''
          }]
        },
        rules: {
          jlbName: [{ required: true, message: '必填', trigger: 'blur' }],
          chinaName: [{ required: true, message: '必填', trigger: 'blur' }],
          phone: [{ required: true, message: '必填', trigger: 'blur' }],
        }

      }
    },

    methods: {
      //添加一行
      chickPlus() {
        this.myform.userList.push({
          chinaName: '',
          phone: ''
        })
      },
      handleCreate() {
        this.$refs['myform'].validate((valid) => {
          if (valid) {
            console.log(this.myform)
          }
        })
      }
    },

  }

</script>

<style scoped>
</style>

從代碼可以看出，在el-form-item標簽中嵌套了el-table標簽，在el-table中每一列又包含了el-form-item，也就需要對此進行驗證。scope.$index表示每一行的索引值，而${scope.$index}結合prop就綁定了每一行每一列的驗證。