vxe-table地址 https://vxetable.cn/v3.8/#/table/edit/rowValid
首先需要在<vxe-table>标签上增加
:edit-rules="validRules"
这个也就是编辑最后保存时的校验
表格中增加按钮
<vxe-table>
<vxe-column title="操作" width="240">
<template
<vxe-button status="warning" content="删除" @click="removeRowEvent(row)"></vxe-button>
<vxe-button status="danger" content="保存" @click="save(row)"></vxe-button>
</template>
</vxe-column>
</vxe-table>
然后在data中添加vaildRules
data () {
//此段代码为自定义校验
const nameValid = ({ cellValue }) => {
if (cellValue && !/^\w+$/.test(cellValue)) {
return new Error('名称格式不正确,必须字母或数字')
}
}
return {
validRules: {
//name既是上面表格prop绑定的值
name: [
{ validator: nameValid }
],
sex: [
{ required: true, message: '性别必须填写' }
],
age: [
{ type: 'number', min: 10, max: 100000, message: '输入 10 ~ 100000 范围' }
],
date: [
{ required: true, message: '日期必须填写' }
]
}
}
最后点击保存时使用
async save(){
validAllEvent () {
const $table = this.$refs.xTable
const errMap = await $table.validate(true).catch(errMap => errMap)
$table.cleraActived().then(() =>{
$table.validate(row,(errMap)=>{
if (errMap) {
VXETable.modal.message({ status: 'error', message: '校验不通过!' })
} else {
VXETable.modal.message({ status: 'success', message: '校验成功!' })
}
},
})
})
}