这类代码网上很多,只是没有人详细讲解其中的细节和关键点,所以很多人把代码拿过去就不好使,我就是其中之一,所以要记录一下。
<template >
<el-form :model="form" ref="form" :rules="formRules" size="small">
<el-table :data="form.userList">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column label="姓名">
<template slot-scope="{row, $index}">
<el-form-item :prop="`userList.${$index}.name`" :rules='formRules.name'>
<el-input v-model="row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</template>
<script>
export default {
data () {
return {
form: {
userList: [
{
id: 1,
name: '张三'
},
{
id: 2,
name: ''
}
]
},
formRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
}
}
},
methods: {
}
}
</script>
上面的代码,与我们平时使用table时略有不同,不同之处就是 data 绑定的 数据源并不是一个独立的变量。
注意,userList 是保存的用户列表数据,如果不把userList放进form里,而是直接定义一个单独的变量,那么你可以洗洗睡了,因为你再怎么折腾,也是不可能成功的,因为逻辑上讲不通!!!
要做表单验证,首先得有表单,然后表单里面有待验证的元素,这样表单验证才能正常工作,逻辑上也能讲的通。
而如果我把userList单独 拿出来定义成一个独立的变量,那它与form表单就没有一毛钱关系了。
没理解的朋友,仔细读几遍,重点搞清楚为什么userList必须放在表单里面。
这就像我们定义一个普通的表单:
form: {
name: '张三',
age: 38
}
name和age字段一定是要放在 form 里面的,放在外面的话,那他俩就谁也不认识谁了,更没法做表单验证。
而要在el-table中做表单必填验证,也是同理,必须把table的数据扔进form表单中才能进行验证,所不同的是,平时我们验证的是form里面的某一个字段,而现在我们要验证的是form里面某一个字段(列表)中的字段。
逻辑讲通了,问题也就明确了,不是我们在网上抄的代码不管用,也不是我们语法有错误,更不是我们的VUE框架版本和人家不一样,而是我们自己陷入了逻辑的误区。