應用場景：

在實際使用中經常會遇到需要在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) { alert(’submit!’); } else { console.log(’error submit!!’); return false; } }); } } }</script>

上述代碼中比較關鍵的部分有一下兩點：

1、:prop='‘domains.’+scope.$index+’.name’' ，用于動態綁定prop到el-form-item；

2、this.$set(this.fromData,‘domains’,this.domains) ，用于為fromData設置domains這個節點。

方法二：

<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='fromData.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='fromData.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:{ 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; } }); } } }</script>

補充知識：Vue+ElementUI 完整增刪查改驗證功能的表格

我就廢話不多說了，大家還是直接看代碼吧~

<template> <div class='block'> <el-col> <el-row> <el-form> <el-form-item> <el-input placeholder='請輸入名稱' v-model='query'></el-input> <el-button @click='handleSelect' style='float: left;margin-left: 10px'>查詢</el-button> <el-button @click='handleAdd' style='float: left;margin-left: 10px'>新增</el-button> </el-form-item> </el-form> </el-row> <el-row> <el-table :data='tableData' border> <el-table-column prop='date' label='日期' width='250'> </el-table-column> <el-table-column prop='name' label='姓名' width='250'> </el-table-column> <el-table-column prop='address' label='地址' width='350'> </el-table-column> <el-table-column> <template slot-scope='scope'> <el-button size='mini' @click='handleEdit(scope.$index,scope.row)'>編輯</el-button> <el-button size='mini' type='danger' @click='handleDelete(scope.$index,scope.row)'>刪除</el-button> </template> </el-table-column> </el-table> </el-row> <el-row> <el-dialog :title='operation===true ?’新增’:’編輯’' :visible.sync='dialogVisible' > <el-form label- :model='lineData' :rules='addRule' ref='lineData' > <el-form-item label='日期' prop='date'> <el-input v-model='lineData.date'></el-input> </el-form-item> <el-form-item label='姓名' prop='name'> <el-input v-model='lineData.name'></el-input> </el-form-item> <el-form-item label='地址'> <el-input v-model='lineData.address'></el-input> </el-form-item> <el-form-item> <el-button @click='handleSave' type='primary'>確定</el-button> <el-button @click='handleCancel'>取消</el-button> </el-form-item> </el-form> </el-dialog> </el-row> </el-col> </div></template><script>export default { 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) } } }}</script><style scoped> .block{ width: 75%; margin-left: 400px; margin-top: 200px; }</style>

以上這篇使用element-ui +Vue 解決 table 里包含表單驗證的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。