没有合适的资源?快使用搜索试试~ 我知道了~
使用element-ui +Vue 解决 table 里包含表单验证的问题
8 下载量 201 浏览量
2020-12-28
17:00:32
上传
评论 1
收藏 54KB PDF 举报
温馨提示
试读
5页
应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。 :prop=”‘tableData.’ + scope.$index + ‘.字段名'” 方法一: <template> <div class=app-container> <el model=fromData ref=from> <el data=fromData.domains> <el-table-colum
资源推荐
资源详情
资源评论
使用使用element-ui +Vue 解决解决 table 里包含表单验证的问题里包含表单验证的问题
应用场景:应用场景:
在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所
示:
这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。
:prop=”‘tableData.’ + scope.$index + ‘.字段名'”
方法一:方法一:
<template>
<div class="app-container">
<el-form :model="fromData" ref="from">
<el-table :data="fromData.domains">
<el-table-column label="姓名">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="fromaDataRules.name">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="地址">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.desc'" :rules="fromaDataRules.desc">
<el-input v-model="scope.row.desc"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button type="warning" @click="submit('from')">submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
fromData:{
domains:undefined
},
fromaDataRules:{
name:[{ required: true, message: '请输入', trigger: 'blur' }],
desc:[ { required: true, message: '请填写', trigger: 'blur' }] },
domains:[],
}
},
mounted(){
this.initDomains()
},
methods:{
initDomains(){
this.domains=[
{
name: "小红",
desc: "11123"
},
{
name: "小红",
desc: "11123"
}
] },
init(){
this.$set(this.fromData,'domains',this.domains)
},
submit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
资源评论
weixin_38744207
- 粉丝: 343
- 资源: 2万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功