例子1:
// 數(shù)據(jù)結構
form: {
// 下面就是主角
roleAwardROList: [{
awardRuleDetailROList: [
{
awardMoney: '',
level: 1,
salesAmount: ''
}],
shopType: 0
}],
}
// dom結構
<el-form ref="form" :model="form" :rules="rules">
<el-table :data="form.roleAwardROList" style="margin-bottom: 20px" v-if="isShow">
<el-table-column label="第一欄內(nèi)容">
<template slot-scope="scope">
{{['第一行', '第二行', '第三行'][scope.row.shopType]}}
</template>
</el-table-column>
<el-table-column :label="第一檔" align="center">
<el-table-column :label="銷售額" min-width="120" align="center">
<template slot-scope="scope">
<el-form-item
:prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.0.salesAmount`"
:rules="{required: true, message: '請輸入正整數(shù)', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
<el-input v-model.trim="scope.row.awardRuleDetailROList[0].salesAmount"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="獎勵" min-width="120" align="center">
<template slot-scope="scope">
<el-form-item
:prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.0.awardMoney`"
:rules="{required: true, message: '請輸入正整數(shù)', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
<el-input v-model.trim="scope.row.awardRuleDetailROList[0].awardMoney"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="第二檔" align="center" v-if="currentLevel > 1">
<el-table-column :label="銷售額" min-width="120" align="center">
<template slot-scope="scope">
<el-form-item
:prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.1.salesAmount`"
:rules="{required: true, message: '請輸入正整數(shù)', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
<el-input v-model.trim="scope.row.awardRuleDetailROList[1].salesAmount"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="獎勵(元)" min-width="120" align="center">
<template slot-scope="scope">
<el-form-item
:prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.1.awardMoney`"
:rules="{required: true, message: '請輸入正整數(shù)', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
<el-input v-model.trim="scope.row.awardRuleDetailROList[1].awardMoney"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="第三檔" align="center" v-if="currentLevel > 2">
<el-table-column :label="銷售額" min-width="120" align="center">
<template slot-scope="scope">
<el-form-item
:prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.2.salesAmount`"
:rules="{required: true, message: '請輸入正整數(shù)', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
<el-input v-model.trim="scope.row.awardRuleDetailROList[2].salesAmount"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="獎勵(元)" min-width="120" align="center">
<template slot-scope="scope">
<el-form-item
:prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.2.awardMoney`"
:rules="{required: true, message: '請輸入正整數(shù)', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
<el-input v-model.trim="scope.row.awardRuleDetailROList[2].awardMoney"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
</el-table>
例子2:
//數(shù)據(jù)結構:
energyROS: [
{
energyLevel: '1',
energyVolume: '0'
},
{
energyLevel: '2',
energyVolume: ''
},
{
energyLevel: '3',
energyVolume: ''
},
{
energyLevel: '4',
energyVolume: ''
},
{
energyLevel: '5',
energyVolume: ''
},
{
energyLevel: '6',
energyVolume: ''
}
]
// dom
<el-table :data="ruleForm.energyROS" style="width: 600px" border>
<el-table-column prop="energyLevel" label="第一列">
<template slot-scope="scope">
<span v-if="scope.row.energyLevel == 1">Lv.1</span>
<span v-if="scope.row.energyLevel == 2">Lv.2</span>
<span v-if="scope.row.energyLevel == 3">Lv.3</span>
<span v-if="scope.row.energyLevel == 4">Lv.4</span>
<span v-if="scope.row.energyLevel == 5">Lv.5</span>
<span v-if="scope.row.energyLevel == 6">Lv.6</span>
</template>
</el-table-column>
<el-table-column prop="energyVolume" label="數(shù)字列">
<template slot-scope="scope">
<el-form-item :prop="`energyROS.${scope.$index}.energyVolume`"
:rules="{required:true,validator:validateEnergyVolume,trigger:'blur'}">
<el-input v-model="scope.row.energyVolume" :disabled="scope.$index == 0" step='100' placeholder="請輸入100,000,000以內(nèi)的整數(shù)"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
// 寫在method:
validateEnergyVolume(rule, value, callback) {
// console.log('rule', rule)
// console.log('value', value)
if (rule.field === 'energyROS.0.energyVolume') {
callback() // 第一行不校驗
return
}
if (!/^\+?[1-9]\d*$/.test(value)) {
callback(new Error('請?zhí)顚?00,000,000以內(nèi)的整數(shù)'))
return
}
if (value > 100000000 || value < 0) {
callback(new Error('請?zhí)顚?00,000,000以內(nèi)的整數(shù)'))
return
}
if (value % 100 !== 0) {
callback(new Error('請輸入100的整倍數(shù)'))
return
}
callback()
}