Vue elementUI表單巢狀表格並對每行進行校驗詳解
阿新 • • 發佈：2022-01-06
目錄
- 效果展示
- 程式碼連結
- 關鍵程式碼
- 表格資料
- 元件巢狀
- 校驗方法
- 重置方法
- 完整程式碼
- 總結
效果展示
先看看這是不是需要的效果^_^
如圖，ElementUI 表單裡嵌套了表格，表格內每行能進行【儲存】【新增】【編輯】【刪除】【重置】等操作，同時可以對每行的某些欄位進行校驗（而不是整個表單校驗！），這種需求很常見，所以記錄下來。
程式碼連結
gitee地址
關鍵程式碼
表格資料
// 資料格式必須是【物件巢狀陣列】，【form】繫結表單，【list】繫結表格
form: {
// 表格資料
list: [
{ id: 1,name: '小葉',age: '12',phone: '123456',show: true },{ id: 2,name: '小李',age: '23',phone: '123457',{ id: 3,name: '小林',phone: '123458',show: true }
]
},元件巢狀
- 新增欄位校驗的時候，格式必須寫成這樣的 :prop="'list.' + scope.$index + '.name'"
這是 elementui 規定的格式，渲染後的結果為 list.1.name - 每個欄位要動態繫結表單的 rules 屬性
- 如果不是以上的格式，會出錯！！！
// 表單必須巢狀在表格的外面，表單必須繫結【rules】【ref】屬性
<el-form :model="form" :rules="rules" ref="form">
<el-table :data="form.list">
<el-table-column prop="name" label="姓名">
<template scope="scope">
// 每個欄位動態的繫結表單的【prop】【rules】屬性
<el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name">
<el-input size="mini" v-model="scope.row.name" placeholder="請輸入" clearable></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
校驗方法
- 表單的欄位物件存在於 this.$refs['form'].fields 中，並且欄位物件具有 prop【datas.1.name】 屬性和 validateField 方法【驗證 datas.1.name 能否通過校驗】
- 但是 validateField 方法需要手動建立來驗證能否通過校驗
- 必須建立，否則會出錯！！！
// 表單校驗方法
// 【form】是需要校驗的表單，就是表單中【ref】繫結的欄位
// 【index】是需要傳入的行數，欄位【scope.$index】
validateField(form,index) {
let result = true;
for (let item of this.$refs[form].fields) {
if(item.prop.split(".")[1] == index){
this.$refs[form].validateField(item.prop,err => {
if(err !="") {
result = false;
}
});
}
if(!result) break;
}
return result;
}
重置方法
// 對【需要校驗】的表單欄位進行重置
// 引數同校驗方法，如果是全部重置
reset(form,index) {
this.$refs[form].fields.forEach(item => {
if(item.prop.split(".")[1] == index){
item.resetField();
}
})
}
// 如果需要全部重置可以直接質控表單中欄位
// 【row】是每行傳入的資料
resetRow(row) {
row.name = "";
row.age = "";
row.phone = "";
}
完整程式碼
因為用的是線上連結，網路不穩定時頁面不一定能加載出來，使用時可以更換成本地的！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>表單巢狀表格逐行驗證</title>
<script src="https://cdn.delivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index." rel="external nofollow" >
<!-- 引入元件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<!-- 頁面元件 -->
<h2 style="text-align: center; line-height: 23px;color: #909399;">vue表單巢狀表格逐行驗證</h2>
<el-form :model="form" :rules="rules" ref="form" :inline="true"
style="margin: 23px auto 0px; width: 96%; overflow: hidden;">
<el-table border :data="form.list">
<el-table-column align="center" prop="id" label="序號" width="55">
</el-table-column>
<el-table-column align="center" prop="name" label="姓名">
<template scope="scope">
<el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name"
v-if="scope.row.show">
<el-input size="mini" v-model="scope.row.name" placeholder="請輸入" clearable>
</el-input>
</el-form-item>
<div v-if="!scope.row.show">{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column align="center" prop="age" label="年齡">
<template scope="scope">
<el-form-item :prop="'list.' + scope.$index + '.age'" :rules="rules.age" v-if="scope.row.show">
<el-input size="mini" v-model="scope.row.age" placeholder="請輸入" clearable>
</el-input>
</el-form-item>
<div v-if="!scope.row.show">{{scope.row.age}}</div>
</template>
</el-table-column>
<el-table-column align="center" prop="phone" label="聯絡方式">
<template scope="scope">
<el-form-item :prop="'list.' + scope.$index + '.phone'" :rules="rules.phone"
v-if="scope.row.show">
<!-- <el-form-item v-if="scope.row.show"> -->
<el-input size="mini" v-model="scope.row.phone" placeholder="請輸入BTtauON" clearable>
</el-input>
</el-form-item>
<div v-if="!scope.row.show">{{scope.row.phone}}</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="290" fixed="right">
<template slot-scope="scope">
<el-button type="text" style="color: #E6A23C;" @click="save(scope.$index,scope.row)"
v-if="scope.row.show" icon="el-icon-check">儲存
</el-button>
<el-button type="text" style="color: #409EFF;" @click="edit(scope.row)" v-if="!scope.row.show"
icon="el-icon-edit">編輯
</el-button>
<el-button type="text" style="color: #67C23A;" v-if="scope.$index+1 == listLength"
@click="addRow(scope.$index,scope.row)" icon="el-icon-plus">新增
</el-button>
<el-button type="text" style="color: #F56C6C;" @click="delRow(scope.$index,scope.row)"
icon="el-icon-delete">刪除
</el-button>
<el-button type="text" style="color: #909399;" @click="reset('form',scope.$index)"
http://www.cppcns.com v-if="scope.row.show" icon="el-icon-refresh">重置
</el-button>
<!-- <el-button type="text" style="color: #909399;" @click="resetRow(scope.row)"
v-if="scope.row.show" icon="el-icon-refresh">重置
</el-button> -->
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',data() {
return {
// 表單資料
form: {
// 表格資料
list: [{ id: 1,name: '',age: '',phone: '',show: true }]
},// 表單驗證規則
rules: {
name: [{ required: true,messahttp://www.cppcns.comge: '請輸入姓名！',trigger: 'blur' }],age: [{ required: true,message: '請輸入年齡！',phone: [{ required: true,message: '請輸入聯絡方式！',},// 表格長度預設為 1
listLength: 1,}
},methods: {
// 校驗
validateField(form,index) {
let result = true;
for (let item of this.$refs[form].fields) {
if (item.prop.split(".")[1] == index) {
this.$refs[form].validateField(item.prop,err => {
if (err != "") {
result = false;
}
});
}
if (!result) break;
}
return result;
},// 重置【只針對校驗欄位】
reset(form,index) {
this.$refs[form].fields.forEach(item => {
if (item.prop.split(".")[1] == index) {
item.resetField();
}
})
},// 重置【全部】
resetRow(row) {
row.name = "";
row.age = "";
row.phone = "";
},// 儲存
save(index,row) {
if (!this.validateField('form',index)) return;
row.show = false;
},// 新增
addRow(index,index)) return;
this.form.list.push({
id: index + 2,show: true
});
this.listLength = this.form.list.length;
},// 編輯
edit(row) {
row.show = true;
},// 刪除
delRow(index,row) {
if (this.form.list.length > 1) {
this.form.list.splice(index,1);
this.listLength = this.form.list.length;
} else {
this.form.list = [{
id: 1,show: true
}];
}
},}
})
</script>
總結
到此這篇關於Vue elementUI表單巢狀表格並對每行進行校驗的文章就介紹到這了,更多相關elementUI表單巢狀表格內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！