Vue2中 对Table表格中的输入项进行校验

 先看效果图，主要思路，table嵌套入form表单，用表单的校验机制实现table校验。

下面直接来代码。。。。

<template>
    <div>
        <template>
            <div class="wrapper">
                <h3>Vue2中对Table表格中的输入项添加校验</h3>
                <el-form :model="fromData" ref="tableFrom">
                    <el-table :data="fromData.tableData" style="width: 100%">
                        <el-table-column prop="date" label="日期" width="180">
                            <template slot-scope="scope">
                                <el-form-item :prop="'tableData.' + scope.$index + '.date'" :rules="rules.date">
                                    <el-input v-model="scope.row.date" />
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" 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 prop="address" label="地址" width="180">
                            <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>
                </el-form>
                <!-- 提交按钮 -->
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </template>

    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            fromData: {
                tableData: [{
                    date: '',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '',
                    name: '',
                    address: ''
                }]
            },
            rules: {
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                date: [
                    { required: true, message: 'date不能为空', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: 'date不能为空', trigger: 'blur' },
                ]
            }
        }
    },
 
    methods: {
        submit() {
            this.$refs['tableFrom'].validate((valid) => {
                if (valid) {
                    //执行保存方法
                    console.log(this.fromData.tableData)
                }
            })
        }
    }
}
</script>