如何在表格里面添加表单,并且进行表单验证

通过el-form和el-table的组合使用,在表格里面添加表单 并且进行验证 表单中v-model绑定scope.row中表格的数据

效果如图所示:

<template>
  <div>
    <!-- <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
    </el-form> -->
    <!-- ruleForm: {
      name: '',
    }, -->
    <!--这里:rules="rules" 可以不写 使用行里面的校验
    当el-table是一个计算属性时 也可以这样写 el-form 中的:model属性为{TableData} el-table中:data属性为TableData 
    -->
    <el-form ref="tableForm" :model="tableForm" :rules="rules" size="small">
      <el-table :data="tableForm.tableData" border>
        <el-table-column label="姓名" min-width="180">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.name`" :rules="rules.name">
              <el-input v-model="scope.row.name" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="日期" min-width="180">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.date`" :rules="rules.date">
              <el-date-picker
                v-model="scope.row.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" min-width="220">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.address`" :rules="rules.address">
              <el-input v-model="scope.row.address" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="60">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleScope(scope)">打印scope</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableForm: {
        // 附属条件表格
        tableData: [
          {
            date: ['2016-05-02', '2016-08-02'],
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: ['2016-05-02', '2016-06-09'],
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: ['2016-04-02', '2016-06-02'],
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            date: ['2016-05-02', '2016-11-02'],
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ]
      },
      rules: {
        name: [
          { required: true, message: '请输入名字', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        address: [{ required: true, message: '请输入地址', trigger: 'change' }],
        date: [{ required: true, message: '请选择日期', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 打印scope
    handleScope(scoped) {
      console.log(scoped)
    },
    // 保存按钮
    submit(tableData) {
      this.$refs.tableForm.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>

下面是类似的文章
https://blog.csdn.net/tan_xiao_tan/article/details/123982071
https://blog.csdn.net/weixin_45609659/article/details/127750902
https://www.jianshu.com/p/172a3b7290b6