element 表格嵌套表單驗證指定行的操作方法
更新時間：2024年07月05日 11:12:07 作者：I'm李剛
這篇文章主要介紹了element 表格嵌套表單驗證指定行的操作方法,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
elementui表格嵌套動態(tài)表單，單獨驗證某一行輸入項是否符合校驗規(guī)則；
input動態(tài)綁定校驗 :prop="'imgTable.' + scope.$index + '.bxName'"
<el-form :model="formTable" ref="formTable" inline size="small">
<el-table :data="formTable.imgTable" :show-header="false" max-height="500">
<el-table-column>
<template slot-scope="scope">
<el-form-item :prop="'imgTable.' + scope.$index + '.bxName'" :rules="{
required: true, message: '請輸入報銷項目', trigger: 'blur'}">
<el-input v-model="scope.row.bxName" placeholder="請輸入報銷項目"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>想要驗證表單指定項需要使用 validateField，官網(wǎng)文檔傳參 Function(props: array | string, callback: Function(errorMessage: string))， array類型可以驗證多個項。
let validarr = []
this.$refs['formTable'].validateField([
`imgTable.${i}.bxName`, `imgTable.${i}.bxMoney`, `imgTable.${i}.bxDate`
],(err) => {
validarr.push(!err)
})
console.log(validarr.every(item=>{return item == true}))error返回值為rules中的message內(nèi)容，如果驗證通過返回空；這里 !err = true
需要注意的是，驗證項傳參為數(shù)組時，validateField會多次返回error，不會一次返回所有項的驗證結(jié)果，如果在error callback中調(diào)用其他方法會多次調(diào)用；所以額外增加了validarr的遍歷判斷所有項都驗證通過
到此這篇關(guān)于element 表格嵌套表單驗證指定行的文章就介紹到這了,更多相關(guān)element 表格嵌套表單驗證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了Vue與React的區(qū)別和優(yōu)勢對比，幫助大家更好的選擇適合自己的前端框架，迷茫的同學(xué)可以進(jìn)來參考下2020-12-12
這篇文章主要介紹了vue打包使用Nginx代理解決跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
用面向?qū)ο蟮乃季S去理解Vue組件，可以將所有的事物都抽象為對象，而類或者說是組件，都具有屬性和操作。這篇文章主要介紹了嘗試用面向?qū)ο笏季S理解Vue組件,需要的朋友可以參考下2021-07-07
使用Bootstrap + Vue.js實現(xiàn)添加刪除數(shù)據(jù)示例
本篇文章主要介紹了使用Bootstrap + Vue.js實現(xiàn) 添加刪除數(shù)據(jù)示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
我們最開始拿到的element-ui是帶有下拉箭頭的,那么如何去除element-ui下拉框的下拉箭頭的實現(xiàn),本文就詳細(xì)的介紹一下,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了使用md5在vue中的axios請求時加密API問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue使用Antd中a-table實現(xiàn)表格數(shù)據(jù)列合并展示示例代碼
文章介紹了如何在Vue中使用Ant?Design的a-table組件實現(xiàn)表格數(shù)據(jù)列合并展示,通過處理函數(shù)對源碼數(shù)據(jù)進(jìn)行操作,處理相同數(shù)據(jù)時合并列單元格2024-11-11
很多朋友不明白在使用vue for時為什么要key，key的作用有哪些,在文中給大家詳細(xì)介紹，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue項目中form?data形式傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue從倉庫state中取不到數(shù)據(jù)的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04