Vue?elementUI表單嵌套表格并對每行進行校驗詳解
更新時間：2022年01月05日 12:04:11 作者：看花吃酒
element-ui中有詳細的各種表格及表格方法,下面這篇文章主要給大家介紹了關于Vue?elementUI表單嵌套表格并對每行進行校驗的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
效果展示
先看看這是不是需要的效果^_^
如圖，ElementUI 表單里嵌套了表格，表格內每行能進行【保存】【新增】【編輯】【刪除】【重置】等操作，同時可以對每行的某些字段進行校驗（而不是整個表單校驗?。?，這種需求很常見，所以記錄下來。
代碼鏈接
關鍵代碼
表格數(shù)據
// 數(shù)據格式必須是【對象嵌套數(shù)組】，【form】綁定表單，【list】綁定表格
form: {
// 表格數(shù)據
list: [
{ id: 1, name: '小葉', age: '12', phone: '123456', show: true },
{ id: 2, name: '小李', age: '23', phone: '123457', show: true },
{ id: 3, name: '小林', age: '12', phone: '123458', show: true }
]
},
組件嵌套
- 添加字段校驗的時候，格式必須寫成這樣的 :prop="'list.' + scope.$index + '.name'"
這是 elementui 規(guī)定的格式，渲染后的結果為 list.1.name - 每個字段要動態(tài)綁定表單的 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">
// 每個字段動態(tài)的綁定表單的【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 方法需要手動創(chuàng)建來驗證能否通過校驗
- 必須創(chuàng)建，否則會出錯！?。?/li>
// 表單校驗方法
// 【form】是需要校驗的表單，就是表單中【ref】綁定的字段
// 【index】是需要傳入的行數(shù)，字段【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;
}
重置方法
// 對【需要校驗】的表單字段進行重置
// 參數(shù)同校驗方法，如果是全部重置
reset(form, index) {
this.$refs[form].fields.forEach(item => {
if(item.prop.split(".")[1] == index){
item.resetField();
}
})
}
// 如果需要全部重置可以直接質控表單中字段
// 【row】是每行傳入的數(shù)據
resetRow(row) {
row.name = "";
row.age = "";
row.phone = "";
}
完整代碼
因為用的是在線鏈接，網絡不穩(wěn)定時頁面不一定能加載出來，使用時可以更換成本地的！
<!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>vue表單嵌套表格逐行驗證</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" 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="聯(lián)系方式">
<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="請輸入" 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)"
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 {
// 表單數(shù)據
form: {
// 表格數(shù)據
list: [{ id: 1, name: '', age: '', phone: '', show: true }]
},
// 表單驗證規(guī)則
rules: {
name: [{ required: true, message: '請輸入姓名！', trigger: 'blur' }],
age: [{ required: true, message: '請輸入年齡！', trigger: 'blur' }],
phone: [{ required: true, message: '請輸入聯(lián)系方式！', trigger: 'blur' }],
},
// 表格長度默認為 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, row) {
if (!this.validateField('form', index)) return;
this.form.list.push({
id: index + 2,
name: '',
age: '',
phone: '',
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,
name: '',
age: '',
phone: '',
show: true
}];
}
},
}
})
</script>總結
到此這篇關于Vue elementUI表單嵌套表格并對每行進行校驗的文章就介紹到這了,更多相關elementUI表單嵌套表格內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue2?自定義?el-radio-button?的樣式并設置默認值的方法
這篇文章主要介紹了vue2?自定義?el-radio-button?的樣式并設置默認值的操作方法，代碼分為html部分和css修改樣式代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue中的路由傳值與重調本路由改變參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了使用vue開發(fā)移動端管理后臺的注意事項,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
基于Vue2實現(xiàn)移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能
這篇文章主要介紹了基于Vue2實現(xiàn)移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要為大家詳細介紹了Vue調用PC攝像頭實現(xiàn)拍照功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了解決vuex刷新數(shù)據消失問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
對于中小型企業(yè),vue應用越來越多,學習vue相對于react的成本要低點,入門相對簡單。這篇文章主要給大家介紹了關于Vue接口封裝的相關資料,需要的朋友可以參考下2021-05-05
使用vue-route 的 beforeEach 實現(xiàn)導航守衛(wèi)(路由跳轉前驗證登錄)功能
在網站中普遍會遇到這樣的需求，路由跳轉前做一些驗證，比如登錄驗證（未登錄去登錄頁）。下面腳本之家小編給大家?guī)砹耸褂胿ue-route 的 beforeEach 實現(xiàn)導航守衛(wèi)(路由跳轉前驗證登錄)功能，感興趣的朋友一起看看吧2018-03-03
這篇文章主要介紹了vue項目build打包后部分樣式錯亂的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。這篇文章主要介紹了vue中使用sessionStorage記住密碼功能,需要的朋友可以參考下2018-07-07