[TOC]
Table中添加動(dòng)態(tài)表單驗(yàn)證
效果如上圖所示船庇，最開(kāi)始table為空蒿赢，然后新增一行后進(jìn)行編輯涤妒，失去焦點(diǎn)后觸發(fā)規(guī)則校驗(yàn)。
關(guān)鍵代碼如下
<template>
<div >
<el-button @click="handleAdd">新增</el-button>
<el-button @click="handleDelete">刪除</el-button>
<el-form :rules="model.rules" :model="model" ref="form">
<el-table
border
@selection-change="handleSelectionChange"
ref="multipleTable"
:data="model.tableData"
style="width: 200px;"
>
<el-table-column
type="selection"
width="50"
align="center"
></el-table-column>
<el-table-column
width="100px"
label="要求批次">
<template slot-scope="scope">
<el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules='model.rules.name'>
<el-input style="width:80px" v-model="scope.row.name" ></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</template>
<script>
export default {
name: 'Page404',
data(){
return {
model:{
tableData:[],
multipleTable:[],
rules:{
name:[{ required: true, message: '請(qǐng)輸入', trigger: 'blur' },]
}
}
}
},
methods:{
handleAdd(){
this.model.tableData.push({
name:"",
})
},
handleDelete(){
let {multipleTable} = this;
this.model.tableData = this.model.tableData.filter(item => {
// 對(duì)比vue 數(shù)組內(nèi)置的id號(hào)當(dāng)做行號(hào)
return !multipleTable.find(i => i.__ob__.dep.id === item.__ob__.dep.id);
});
},
handleSelectionChange(val){
this.multipleTable = val;
}
},
}
</script>
解析：其實(shí)問(wèn)題關(guān)鍵就在于如何給el-form-item動(dòng)態(tài)綁定prop,然后,:prop="'tableData.' + scope.$index + '.字段名'",最后把規(guī)則也綁定上:rules='model.rules.name' 践啄。
其實(shí)到此為止都還是比較簡(jiǎn)單浇雹，網(wǎng)上到處都有。但是下面是我碰到的一個(gè)坑屿讽，也搞了好久才定位到問(wèn)題箫爷。
Table中添加表單驗(yàn)證動(dòng)態(tài)刪減后規(guī)則沒(méi)有重新校驗(yàn)
錯(cuò)誤結(jié)果如下圖：途中明顯我已經(jīng)有值了，但還是標(biāo)紅聂儒，為啥呢虎锚？
復(fù)現(xiàn)步驟：
1.空table
2.直接新增兩行
3.觸發(fā)兩行的規(guī)則，使標(biāo)紅（此處因?yàn)槲沂峭ㄟ^(guò)失焦來(lái)觸發(fā)）
4.勾選第一行衩婚，點(diǎn)擊刪除按鈕
5.得到不是我們想要的結(jié)果
分析
網(wǎng)上找了下窜护，發(fā)現(xiàn)并沒(méi)有看到類似問(wèn)題描述，我自己猜測(cè)應(yīng)該是:prop="'tableData.' + scope.$index + '.name'"中scope.$index的原因非春，原來(lái)兩行分別是0,1,現(xiàn)在刪除后只有一行就是0,導(dǎo)致沒(méi)有重新觸發(fā)規(guī)則校驗(yàn)柱徙。
解決思路
想了許久缓屠，還是決定手動(dòng)觸發(fā)table的重新渲染，最簡(jiǎn)單的方式就是通過(guò)v-if來(lái)整個(gè)重新渲染table护侮。關(guān)鍵代碼就是在刪除操作前后手動(dòng)觸發(fā)table清除和顯現(xiàn)敌完。下面是完整代碼：
<template>
<div >
<el-button @click="handleAdd">新增</el-button>
<el-button @click="handleDelete">刪除</el-button>
<el-form :rules="model.rules" :model="model" ref="form">
<el-table
v-if="tableVisible"
border
@selection-change="handleSelectionChange"
ref="multipleTable"
:data="model.tableData"
style="width: 200px;"
>
<el-table-column
type="selection"
width="50"
align="center"
></el-table-column>
<el-table-column
width="100px"
label="要求批次">
<template slot-scope="scope">
<el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules='model.rules.name'>
<el-input style="width:80px" v-model="scope.row.name" ></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</template>
<script>
export default {
name: 'Page404',
data(){
return {
tableVisible:true,
model:{
tableData:[],
multipleTable:[],
rules:{
name:[{ required: true, message: '請(qǐng)輸入', trigger: 'blur' },]
}
}
}
},
methods:{
handleAdd(){
this.model.tableData.push({
name:"",
})
},
handleDelete(){
this.tableVisible = false;
let {multipleTable} = this;
this.model.tableData = this.model.tableData.filter(item => {
// 對(duì)比vue 數(shù)組內(nèi)置的id號(hào)當(dāng)做行號(hào)
return !multipleTable.find(i => i.__ob__.dep.id === item.__ob__.dep.id);
});
//如果沒(méi)有$nextTick，就不會(huì)生效羊初，這樣強(qiáng)制保證在下個(gè)循環(huán)來(lái)顯示table
this.$nextTick(()=>{
this.tableVisible = true;
})
},
handleSelectionChange(val){
this.multipleTable = val;
}
},
}
</script>
ok滨溉，解決問(wèn)題。如果有更優(yōu)雅的方式解決或者問(wèn)題原因定位歡迎交流和指教长赞。
