Vue与elementUI表单嵌套表格实现每一项表单验证

前言：有时候表单会要已表格的样式布局，实现表格里每一项表单的验证，其实关键在于表单项设置prop，绑定输入框的model值，这个model值来自于表格的数据返回（scope.row.数据值）

如果不需要进行表单验证，就不需要在外面包裹 <el-form :model="alldata" :rules="alldata.rules">

表格知识：

如果后台返回字段是你需要的可以直接使用表格项prop对应

<el-table-column prop="date" label="日期" width="180"> </el-table-column>

如果需要自定义后台返回的字段拼接，可以用：

 <el-table-column  label="年月" align="center">

        <template slot-scope="scope">

          <span>{ { scope.row.tyear }}</span

          >年 <span>{ { scope.row.tmonth }}</span

          >月

        </template>

      </el-table-column>

scope.$index:表格当前项索引,

scope.row：表格当前项数据对象

操作tabledata数组可以在表格中拿到scope.$index，进而可以操作里面的对象

表单知识：

表单prop验证，表格显示，表单嵌套表格实现表格每一项的验证

Prop绑定表单对象中对应的部分，才能用对应的规则。

所以在表单项中验证规则必须要有prop，  :prop="'tableData.' + scope.$index + 'date'"

才能使用:rules="alldata.rules.date" 规则，才能验证

表格里面的表单项v-model绑定可以根据表格的scope.row返回的进行操作

 完整代码：

<template>
  <div>
    <el-form :model="alldata" :rules="alldata.rules">
      <el-table :data="alldata.tableData" style="width: 100%">
        <el-table-column label="日期" width="180">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + 'date'"
              :rules="alldata.rules.date"
            >
              <el-date-picker
                v-model="scope.row.date"
                type="datetime"
                placeholder="选择日期时间"
                size="mini"
              >
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="180">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + 'name'"
              :rules="alldata.rules.name"
            >
              <el-input
                v-model="scope.row.name"
                placeholder="请输入姓名"
                size="mini"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="180">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + 'sex'"
              :rules="alldata.rules.sex"
            >
              <el-select
                v-model="scope.row.sex"
                placeholder="请选择性别"
                size="mini"
              >
                <el-option
                  v-for="item in alldata.sexchoose"
                  :key="item.id"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <p style="font-size: 1rem">你好世界</p>
  </div>
</template>

<script>

export default {

  data() {
    return {

      alldata: {
        // 表单验证规则
        rules: {
          date: { type: "string", required: true, message: "请勿随意改变时间", trigger: "change" },
          name: { type: "string", required: true, message: "输入姓名", trigger: "blur" },
          sex: { type: "string", required: true, message: "你输入正确吗", trigger: "change" },
        },
        // 性别选择
        sexchoose: [
          {
            id: 1,
            value: '男'
          },
          {
            id: '2',
            value: '女'
          },
        ],
        // 表格数据
        tableData: [{
          date: '2016-05-02',
          name: '',
          sex: '',
        }, {
          date: '2016-05-02',
          name: '王小虎',
          sex: '男',
        }, {
          date: '2016-05-02',
          name: '王小虎',
          sex: '男',
        }]
      }
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-input__inner {
  width: 70%;
}
</style>