【Vue】【Element】在表格表单中,不同行进行不同校验
目标:如图所示,每行根据不同的返回数据,最大值不同,获取数据如下json// 模拟数据[{id: 1,name: '',num: 0,max: 10},{id: 2,name: '',num: 0,max: 14}]代码<template><div><el-form ref="ruleForm"><el-table..
·
目标:如图所示,每行根据不同的返回数据,最大值不同,获取数据如下json
// 模拟数据
[
{
id: 1,
name: '',
num: 0,
max: 10
},
{
id: 2,
name: '',
num: 0,
max: 14
}
]
代码
<template>
<div>
<el-form ref="ruleForm">
<el-table
ref="multipleTable"
v-adaptive
:data="list"
:header-cell-style="{ background: '#eef1f6', color: '#606266' }"
height="100"
border
fit
highlight-current-row
>
<el-table-column align="center" prop="name" label="名称">
<template scope="scope">
<el-form-item prop="name">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" prop="num" label="数量">
<template scope="scope">
<el-form-item prop="num" :rules="[{ validator: (_1, _2, c) => customCcheck(scope.row.num, c, scope.row), trigger: 'blur' }]">
<el-input v-model="scope.row.num"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</template>
<script>
const data = [
{
id: 1,
name: '',
num: 0,
max: 10
},
{
id: 2,
name: '',
num: 0,
max: 14
}
]
export default {
data() {
return {
list: []
}
},
created() {
this.list = [...data]
},
methods: {
/**
* 自定义校验
*/
customCcheck(b, c, item) {
console.log(b, item)
if (b > item.max) c('不能超过最大值')
else c()
}
}
}
</script>
更多推荐
已为社区贡献12条内容
所有评论(0)