使用element-ui +Vue 解決 table 裡包含表單驗證的問題
阿新 • • 發佈:2020-07-20
應用場景:
在實際使用中經常會遇到需要在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,trigger: 'blur' }] },},methods:{ initDomains(){ this.fromData.domains=[ { name: "小紅",{ name: "小紅",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 style="width: 250px;float: left" 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" style="width: 100%" 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 class="dialog" :title="operation===true ?'新增':'編輯'" :visible.sync="dialogVisible" width="350px" > <el-form label-width="80px" :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',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 裡包含表單驗證的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。