应用场景：

在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示：

这个校验中，最关键的问题在于如何给el-form-item 动态绑定prop。

:prop="'tableData.' + scope.$index + '.字段名'"

方法一：

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

alert('submit!');

} else {

console.log('error submit!!');

return false;

}

});

}

}

}

上述代码中比较关键的部分有一下两点：

1、:prop="‘domains.'+scope.$index+'.name'" ，用于动态绑定prop到el-form-item；

2、this.$set(this.fromData,‘domains',this.domains) ，用于为fromData设置domains这个节点。

方法二：

export default {

data() {

return {

fromData:{

fromaDataRules:{

name:[{ required: true, message: '请输入', trigger: 'blur' }],

desc:[ { required: true, message: '请填写', trigger: 'blur' }]

},

domains:[],

},

}

},

mounted(){

this.initDomains()

},

methods:{

initDomains(){

this.fromData.domains=[

{

name: "小红",

desc: "11123"

},

{

name: "小红",

desc: "11123"

}

]

},

init(){

},

submit(formName){

this.$refs[formName].validate((valid) => {

if (valid) {

alert('submit!');

} else {

console.log('error submit!!');

return false;

}

});

}

}

}

补充知识：Vue+ElementUI 完整增删查改验证功能的表格

我就废话不多说了，大家还是直接看代码吧~

data () {

return {

operation: true,

dialogVisible: false,

lineData: {},

editData: {},

query: '',

addRule: {

date: [{required: true, message: '请输入日期', trigger: 'blur'}],

name: [{required: true, message: '请输入名称', trigger: 'blur'}]

},

tableData: [{

id: 1,

date: '2016-05-02',

name: '王一虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

id: 2,

date: '2016-05-04',

name: '王二虎',

address: '上海市普陀区金沙江路 1517 弄'

}, {

id: 3,

date: '2016-05-01',

name: '王一虎',

address: '上海市普陀区金沙江路 1519 弄'

}, {

id: 4,

date: '2016-05-03',

name: '王四虎',

address: '上海市普陀区金沙江路 1516 弄'

}]

}

},

methods: {

handleEdit (index, row) {

this.editData = JSON.stringify(row)

this.lineData = JSON.parse(this.editData)

this.dialogVisible = true

this.operation = false

},

handleDelete (index, row) {

this.tableData.splice(index, 1)

},

handleAdd () {

this.dialogVisible = true

this.operation = true

this.lineData = {}

this.lineData.id = Math.random()

},

handleSelect () {

if (this.query !== '') {

const tmpData = []

for (let item of this.tableData) {

if (item.name === this.query) {

tmpData.push(item)

}

}

this.tableData = tmpData

}

},

handleSave () {

this.$refs.lineData.validate((valid) => {

if (valid) {

this.addLine(this.lineData)

this.dialogVisible = false

} else {

alert('保存失败')

return false

}

})

},

handleCancel () {

this.dialogVisible = false

},

addLine (item) {

let existed = false

for (let i = 0; i < this.tableData.length; i++) {

if (this.tableData[i].id === item.id) {

this.tableData[i].id = item.id

this.tableData[i].name = item.name

this.tableData[i].address = item.address

this.tableData[i].date = item.date

existed = true

break

}

}

if (!existed) {

this.tableData.push(this.lineData)

}

}

}

}

.block{

width: 75%;

margin-left: 400px;

margin-top: 200px;

}

以上这篇使用element-ui +Vue 解决 table 里包含表单验证的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。