vxe-table 如何实现对单元格数据校验不通过的单元格显示背景颜色,通过设置 valid-config.theme=‘beautify’ 设置为高亮样式,调用 fullValidate 方法可以同时显示多个错误提示。
https://vxetable.cn
通过设置 valid-config.showErrorBackground 显示校验错误单元格背景色
<template><div><div><vxe-button@click="validEvent">多个校验变动数据</vxe-button><vxe-button@click="fullValidEvent">多个校验全量数据</vxe-button></div><vxe-gridref="gridRef"v-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{ref,reactive}from'vue'import{VxeUI}from'vxe-table'constgridRef=ref()constgridOptions=reactive({border:true,showOverflow:true,keepSource:true,height:300,editConfig:{trigger:'click',mode:'row',showStatus:true},validConfig:{msgMode:'full',theme:'beautify',showErrorBackground:true},editRules:{name:[{required:true,message:'必须填写'}],role:[{required:true,message:'必须填写'}]},columns:[{type:'checkbox',width:60},{type:'seq',width:70},{field:'name',title:'Name',editRender:{name:'VxeInput'}},{field:'role',title:'Role',editRender:{name:'VxeInput'}},{field:'sex',title:'Sex',editRender:{name:'VxeInput'}},{field:'age',title:'Age',editRender:{name:'VxeInput'}},{field:'date',title:'Date',editRender:{name:'VxeInput'}}],data:[{id:10001,name:'Test1',role:'Develop',sex:'0',age:28,address:'test abc'},{id:10002,name:'',role:'Test',sex:'1',age:22,address:'Guangzhou'},{id:10003,name:'Test3',role:'PM',sex:'',age:32,address:'Shanghai'},{id:10004,name:'Test4',role:'Designer',sex:'',age:23,address:'test abc'},{id:10005,name:'',role:'',sex:'1',age:30,address:'Shanghai'},{id:10006,name:'Test6',role:'Designer',sex:'1',age:21,address:'test abc'}]})constvalidEvent=async()=>{const$grid=gridRef.valueif($grid){consterrMap=await$grid.fullValidate()if(errMap){VxeUI.modal.message({status:'error',content:'校验不通过！'})}else{VxeUI.modal.message({status:'success',content:'校验成功！'})}}}constfullValidEvent=async()=>{const$grid=gridRef.valueif($grid){consterrMap=await$grid.fullValidate(true)if(errMap){VxeUI.modal.message({status:'error',content:'校验不通过！'})}else{VxeUI.modal.message({status:'success',content:'校验成功！'})}}}</script>https://gitee.com/x-extends/vxe-table
