el-table動态新增行及校驗規則

代碼

<template>
  <el-form ref="formName" :model="studentData">
    <el-table :data="studentData.studentList" stripe>
      <el-table-column label="姓名" align="left">
        <template slot-scope="scope">
          <el-form-item
            size="small"
            :prop="'studentList.' + scope.$index + '.name'"
            :rules="rules.name"
          >
            <el-input v-model="scope.row.name" placeholder="請輸入姓名" />
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column label="性别">
        <template slot-scope="scope">
          <el-form-item
            size="small"
            :prop="'studentList.' + scope.$index + '.sex'"
            :rules="rules.sex"
          >
            <el-select v-model="scope.row.sex" placeholder="請選擇性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            id="delete-btn"
            @click="deleteRow(scope.row, scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px; text-align: right">
      <el-button @click="addRow" size="small">新增</el-button>
      <el-button @click="saveData('formName')" size="small">确定</el-button>
    </div>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      studentData: {
        studentList: [
          {
            name: "王小虎",
            sex: "男",
          },
          {
            name: "Linda",
            sex: "女",
          },
        ],
      },
      //驗證規則
      rules: {
        name: [
          {
            required: true,
            message: "請輸入姓名",
            trigger: ["blur", "change"],
          },
        ],
        sex: [
          {
            required: true,
            message: "請選擇性别",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    // 添加一行
    addRow() {
      const item = {
        name: "",
        sex: "",
      };
      this.studentData.studentList.push(item);
    },
    // 删除一行
    deleteRow(row, index) {
      this.studentData.studentList.splice(index, 1);
    },
    saveData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.el-form {
  width: 60%;
  background: white;
  border: 1px solid gainsboro;
}
/deep/ .el-input {
  width: 100%;
}
</style>
           

效果

點選新增，table新增一行，點選删除，删除所在行。若驗證不通過，點選“确定”，提示如下圖

分析

1. 需要借助el-form的校驗，el-table外層嵌套一層el-form，使用el-form的校驗機制
2. 由于每行都需要校驗，借助scope.$index
3. 給表單設定rules屬性傳入驗證規則
4. 給表單設定model屬性傳入表單資料
5. 給表單項(Form-ltem)設定prop屬性,值為需要校驗的字段名

參考

參考1

參考2

參考3