快捷導(dǎo)航

element 表格嵌套表單驗(yàn)證指定行的操作方法

更新時(shí)間：2024年07月05日 11:12:07 作者：I'm李剛

這篇文章主要介紹了element 表格嵌套表單驗(yàn)證指定行的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

elementui表格嵌套動(dòng)態(tài)表單，單獨(dú)驗(yàn)證某一行輸入項(xiàng)是否符合校驗(yàn)規(guī)則；

input動(dòng)態(tài)綁定校驗(yàn) :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: '請(qǐng)輸入報(bào)銷項(xiàng)目', trigger: 'blur'}">
					    <el-input v-model="scope.row.bxName" placeholder="請(qǐng)輸入報(bào)銷項(xiàng)目"></el-input>
					</el-form-item>
            </template>
        </el-table-column>
    </el-table>
</el-form>

想要驗(yàn)證表單指定項(xiàng)需要使用 validateField，官網(wǎng)文檔傳參 Function(props: array | string, callback: Function(errorMessage: string))， array類型可以驗(yàn)證多個(gè)項(xiàng)。

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)容，如果驗(yàn)證通過返回空；這里 !err = true

需要注意的是，驗(yàn)證項(xiàng)傳參為數(shù)組時(shí)，validateField會(huì)多次返回error，不會(huì)一次返回所有項(xiàng)的驗(yàn)證結(jié)果，如果在error callback中調(diào)用其他方法會(huì)多次調(diào)用；所以額外增加了validarr的遍歷判斷所有項(xiàng)都驗(yàn)證通過

到此這篇關(guān)于element 表格嵌套表單驗(yàn)證指定行的文章就介紹到這了,更多相關(guān)element 表格嵌套表單驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解
這篇文章主要介紹了vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中的immediate、handler和deep屬性詳解，本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-09-09
Vue使用axios發(fā)送請(qǐng)求并實(shí)現(xiàn)簡(jiǎn)單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請(qǐng)求并實(shí)現(xiàn)簡(jiǎn)單封裝,主要包括安裝axios及簡(jiǎn)單使用配置方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
幾個(gè)你不知道的技巧助你寫出更優(yōu)雅的vue.js代碼
本文參考自油管上某個(gè)國(guó)外大神的公開演講視頻，學(xué)習(xí)了一下覺得很不錯(cuò)，所以在項(xiàng)目中也使用了這些不錯(cuò)的技巧。趁周末有空，寫個(gè)博客記錄一下
2018-06-06
vue.js+Echarts開發(fā)圖表放大縮小功能實(shí)例
本篇文章主要介紹了vue.js+Echarts開發(fā)圖表放大縮小功能實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
vue項(xiàng)目實(shí)現(xiàn)設(shè)置根據(jù)路由高亮對(duì)應(yīng)的菜單項(xiàng)操作
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)設(shè)置根據(jù)路由高亮對(duì)應(yīng)的菜單項(xiàng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問題
這篇文章主要介紹了詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
vue實(shí)現(xiàn)簡(jiǎn)易的雙向數(shù)據(jù)綁定
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡(jiǎn)易的雙向數(shù)據(jù)綁定，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
在vue項(xiàng)目中優(yōu)雅的使用SVG的方法實(shí)例詳解
本文旨在介紹如何在項(xiàng)目中配置和方便的使用svg圖標(biāo)。本文以vue項(xiàng)目為例給大家介紹在vue項(xiàng)目中優(yōu)雅的使用SVG的方法，需要的朋友參考下吧
2018-12-12
vue 單元測(cè)試初探
這篇文章主要介紹了vue 單元測(cè)試的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04
vue form表單使用resetFields函數(shù)出現(xiàn)的問題
這篇文章主要介紹了vue form表單使用resetFields函數(shù)出現(xiàn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05