近期开发中遇到了element ui 表格自定义校验的问题，查了一些资料没有合适的，最后自己试试实现了,如图
image.png
网上查了很多表格校验的，但是都不是自定义校验，需要保证设置促销价大于0小于原价，这时需要校验时拿到每一行的数据来对比
<el-form label-width="110" ref="formValidate" :rules="ruleCustom" :model="formValidate">
<el-table ref="listDataDetail"
@selection-change="select"
:data="formValidate.selectList1"
@clearSelection="clearSelect"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="categoryName"
label="商品类别"
width="180">
</el-table-column>
<el-table-column
prop="skuCode"
label="sku编码"
width="180">
</el-table-column>
<el-table-column
prop="skuName"
label="商品名称">
</el-table-column>
<el-table-column
prop="surplusStock"
label="当前库存">
</el-table-column>
<el-table-column
prop="salePrice"
label="当前售价">
</el-table-column>
<el-table-column
label="折扣">
<template slot-scope="scope">
<el-form-item label-width="0">
<el-input v-model="scope.row.discount" placeholder="" size="small" :disabled="viewType==1"
@blur="blurDiscount(scope.$index,scope.row)"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="减价">
<template slot-scope="scope">
<el-form-item label-width="0">
<el-input v-model="scope.row.priceReduction" placeholder="" size="small" :disabled="viewType==1"
@blur="blurPriceReduction(scope.$index,scope.row)"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="促销价">
<template slot-scope="scope">
<el-form-item label-width="0" :rules="ruleCustom.discountPrice"
:prop='`selectList1.${scope.$index}.discountPrice`'
>
<el-input v-model="scope.row.discountPrice" placeholder="" size="small" :disabled="viewType==1"
@blur="blurDiscountPrice(scope.$index,scope.row)"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="排序" width="280">
<template slot-scope="scope">
<el-button size='mini' type="primary" round icon="el-icon-caret-top"
@click="goTop(scope.$index,scope.row)"></el-button>
<el-button size='mini' type="success" round icon="el-icon-top"
@click="addStep(scope.$index,scope.row)"></el-button>
<el-button size='mini' type="success" round icon="el-icon-bottom"
@click="reduceStep(scope.$index,scope.row)"></el-button>
<el-button size='mini' type="primary" round icon="el-icon-caret-bottom"
@click="goBottom(scope.$index)"></el-button>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-form-item label-width="0">
<Button type="default" @click="removeItem(scope.$index, scope.row)">移除</Button>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
促销校验对象
ruleCustom: {
discountPrice: [
{validator: validatePass, trigger: 'change'}
]
},
const validatePass = (rule, value, callback) => {
console.log(rule.field)
let ruleIndex = rule.field.split('.')[1]
console.log(ruleIndex, this.formValidate.selectList1)
if (this.formValidate.selectList1[ruleIndex].salePrice < value || value < 0) {
callback(new Error('价格设置有误'))
} else {
callback()
}
}
这个的关键就是促销价的props 传 :prop='selectList1.${scope.$index}.discountPrice'
这个在校验方法validatePass会拿到rule.field如图打印的，然后截取到index，进而拿到该商品价格并比较校验
image.png
网友评论