vue里el-form+el-table实现验证规则的写法
重点是因为
使用el-form + el-table与单独使用el-form时数据不同，前者是对象+json数组，后者是对象，导致了el-form-item绑定prop时的写法不同文章来源：https://www.toymoban.com/news/detail-694678.html
以下是el-form+el-table实现验证规则的写法文章来源地址https://www.toymoban.com/news/detail-694678.html
<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' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
]
}
}
},
}
</script>
到了这里，关于vue里el-form+el-table实现验证规则的写法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
