實現效果
1.根據項目需求 實現下面展示
2.由於存在表單校驗且數據格式如下(根據項目需求改造數據結構)如下：
[{
name: '張三',
rules: {
insuranceAmount: { type: 'string', required: true, message: '填寫醫療', trigger: 'blur' },
suggestedPremium: { type: 'string', required: true, message: '填寫保費', trigger: 'blur' },
},
list: [{ insuranceType: '醫療', insuranceAmount: '', suggestedPremium: '', showFlag: false },
{ insuranceType: '重疾', insuranceAmount: '', suggestedPremium: '', showFlag: false }]
},
{
name: '李四',
rules: {
insuranceAmount: { type: 'string', required: true, message: '填寫醫療', trigger: 'blur' },
suggestedPremium: { type: 'string', required: true, message: '填寫保費', trigger: 'blur' },
},
list: [{ insuranceType: '醫療', insuranceAmount: '', suggestedPremium: '', showFlag: false },
{ insuranceType: '重疾', insuranceAmount: '', suggestedPremium: '', showFlag: false }]
}]
3.每一列添加顯示隱藏按鈕-隱藏後當前行表單不做校驗（類似以下圖）
4.所以提交時對每個表單都要做校驗(html部分)
5.js提交處理部分
let newArr = []
this.wrapList.forEach((ele, index) => {
this.$refs['form'][index].validate((valid) => {
if (valid) {
newArr.push(true)
} else {
newArr.push(false)
}
})
})
let flag = newArr.every((val) => {
return val == true
})
if (flag) {
console.log('信息填寫完整')
} else {
console.log('信息未填寫完整')
}
6.完整代碼如下（只提供了一個簡單demo供參考）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue+element 表單驗證-某些行不驗證</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<div class="wrap">
<div v-for="(item, index) in wrapList" :key="index">
<el-form :rules="item.rules" :model="item" ref="form" v-cloak>
<p>姓名: {{item.name}}</p>
<el-table :data="item.list" style="width: 500px">
<el-table-column prop="date" label="日期" width="180">
<template slot-scope="scope">
<div>
<el-form-item :prop="'list.' + scope.$index + '.insuranceAmount'" :rules="!scope.row.showFlag ? item.rules.insuranceAmount : {}">
<span>保額</span>
<el-input type="number" v-model="scope.row.insuranceAmount" :disabled="scope.row.showFlag" style="width:100px;"></el-input>
<span>萬</span>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<div>
<el-form-item :prop="'list.' + scope.$index + '.suggestedPremium'" :rules="!scope.row.showFlag ? item.rules.suggestedPremium : {}"
:rules='item..suggestedPremium'>
保費
<el-input type="number" v-model="scope.row.suggestedPremium" :disabled="scope.row.showFlag" style="width:100px;">元/
</el-form-item>
</el-input>
</div>
</template>
</el-table-column>
<el-table-column prop="" width="100px">
<template slot-scope="scope">
<div>
<el-button @click="toggleStatus(scope.row)" type="info" :style="{'background-color': scope.row.showFlag ? '#FFAD41' : '#5C98FD','color': '#fff'}"
size="small">
{{scope.row.showFlag ? '顯示': '隱藏'}}
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
<el-button @click="submitAll">提交</el-button>
</div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
wrapList: []
},
mounted() {
this.setList()
},
methods: {
// 定義一些表單數據
setList() {
this.wrapList = [
{
name: '張三',
rules: {
insuranceAmount: { type: 'string', required: true, message: '填寫醫療', trigger: 'blur' },
suggestedPremium: { type: 'string', required: true, message: '填寫保費', trigger: 'blur' },
},
list: [{ insuranceType: '醫療', insuranceAmount: '', suggestedPremium: '', showFlag: false },
{ insuranceType: '重疾', insuranceAmount: '', suggestedPremium: '', showFlag: false }]
},
{
name: '李四',
rules: {
insuranceAmount: { type: 'string', required: true, message: '填寫醫療', trigger: 'blur' },
suggestedPremium: { type: 'string', required: true, message: '填寫保費', trigger: 'blur' },
},
list: [{ insuranceType: '醫療', insuranceAmount: '', suggestedPremium: '', showFlag: false },
{ insuranceType: '重疾', insuranceAmount: '', suggestedPremium: '', showFlag: false }]
}
]
},
// 顯示或者隱藏 禁用或者開啓表單校驗
toggleStatus(row) {
row.showFlag = !row.showFlag
this.wrapList.forEach((item, index) => {
this.$refs['form'][index].clearValidate()
})
},
// 校驗表單數據
submitAll() {
let newArr = []
this.wrapList.forEach((ele, index) => {
this.$refs['form'][index].validate((valid) => {
if (valid) {
newArr.push(true)
} else {
newArr.push(false)
}
})
})
let flag = newArr.every((val) => {
return val == true
})
if (flag) {
console.log('信息填寫完整')
} else {
console.log('信息未填寫完整')
}
}
}
})
</script>