使用element-ui +Vue 解决 table 里包含表单验证的问题 - CSDN文库

46 浏览量更新于2023-05-04 1 收藏 54KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

使用使用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) {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38744207

粉丝: 343
资源: 2万+

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈