vue+element-ui el-table元件內表單驗證問題

vue+element-ui el-table元件內表單驗證問題

新增rules

rules: {
    variable_name: [{ required: true, message: '名稱不能為空', trigger: "blur" }]
}
複製程式碼

html程式碼

<el-form ref="variableForm" :model="variable">
    <el-table :data="variable.Variable">
        <el-table-column label="名稱">
            <template slot-scope="scope">
                <el-form-item :prop="'Variable.' + scope.$index + '.Name'" :rules='rules.variable_name'>
                    <el-input v-model.trim="scope.row.Name"></el-input>
                </el-form-item>
            </template>
        </el-table-column>
    </el-table>
<el-form>
複製程式碼

js程式碼

this.$refs.variableForm.validate(variable => {
    if (!variable) {
        return;
    }
}    
複製程式碼

關鍵：

如何給el-form-item動態繫結prop

:prop="'Variable.' + scope.$index + '.欄位名'"