elementUI中表格中表單的驗證

表格中的表單驗證，就是在將表格放在表單中，將表格綁定的數據也放在表單中。

最重要的是要給表格中需要驗證的字段動態添加prop，再給其綁定規則。

<el-form :model="tableForm" ref="tableForm">
		<el-table
			class="bankTable" 
			:data="tableForm.bankData" 
			border 
			style="width: 100%;margin:20px 0;"
			@selection-change="handleSelectionChange">

			<el-table-column type="selection" width="55"></el-table-column>

			<el-table-column prop="BANKA" label="開戶行名稱" width='250' show-overflow-tooltip></el-table-column>

			<el-table-column label="銀行所在省">
				<template slot-scope="scope">
					<el-form-item :prop="`bankData.${scope.$index}.KHHSF`"  :rules="tableRules.KHHSF">
					<el-input v-model="scope.row.KHHSF" :disabled="scope.row.search"></el-input>
					</el-form-item>
				</template>
			</el-table-column>

			<el-table-column prop="KHHDS" label="銀行所在市">
				<template slot-scope="scope">
					<el-form-item :prop="`bankData.${scope.$index}.KHHDS`"  :rules="tableRules.KHHDS">
						<el-input v-model="scope.row.KHHDS" :disabled="scope.row.search"></el-input>
					</el-form-item>
				</template>
			</el-table-column>

			<el-table-column prop="BANKN" label="銀行賬號">
				<template slot-scope="scope">
					<el-form-item>
					<el-input v-model="scope.row.BANKN" :disabled="scope.row.search"></el-input>
					</el-form-item>
				</template>
			</el-table-column>

			<el-table-column prop="KOINH" label="戶主">

			</el-table-column>

		</el-table>
		</el-form>

    data() {
	return {
		tableForm:{
			bankData:[
                            {
                                BANKA:'',
                                KHHSF:'',
                                KHHDS:'',
                                BANKN:'',
                                KOINH:'',
                            }
                        ],
		},
                tableRules:{
			//銀行所在省
			KHHSF:[
				{ required: true, message: '請輸入銀行所在省'},
				{ max: 20, message: '長度在20個字符以內',}
			],
			//銀行所在市
			KHHDS:[
				{ required: true, message: '請輸入銀行所在省'},
				{ max: 20, message: '長度在20個字符以內'}
			]
		},
        }
    }