在 Vue 3 业务中，当使用 VXETable 这个虚拟滚动表格组件并嵌套 ElementPlus 的 Form 表单时，可能会遇到表单校验不正确的问题。业务需求是在表格中嵌套表单，用于展示和修改数据。如果直接使用 ElementPlus 的 Table 组件一次性渲染全部元素，会导致需要绑定的事件数量过大（例如200 * 6 = 1200），从而...
import{typeVxeTableInstance}from'vxe-table';constvxeTableRef=ref<VxeTableInstance>()// 自定义校验consthandleCustomValidate=()=>{constitem=formModel.value.data.find((item)=>!item.field1||!item.field2||!item.field3||!item.field4||!item.field5||!item.field6)asRecord<string,any>|undefined...
}this.activeTab='3'awaitthis.$nextTick()const$form3 =this.$refs.formRef3if($form3) {consterrMap =await$form3.validate()if(errMap) {return} }VxeUI.modal.message({content:'保存成功',status:'success'}) } } }</script>
通过实验，确认问题确实与 VXETable 的虚拟滚动功能有关。关闭虚拟滚动，性能下降明显，且校验问题重现。问题根源在于虚拟滚动机制导致一次渲染的数据量减少，而 ElementPlus 的 Form 组件校验机制只针对渲染出来的数据进行。ElementPlus 的 Form 组件校验方法 `validate` 和 `validateField` 等逻辑表明，校验...
VxTable fullvalidate方法的主要参数如下: 1.table:待验证的表格对象。 2.validateFunc:验证函数,自定义验证逻辑。此函数接收两个参数,分别为错误信息和错误代码。 3.errorInfo:错误信息,用于描述验证失败的具体原因。 4.errorCode:错误代码,用于表示验证失败的类型。 【VxTable fullvalidate方法的实现过程】 1.首先...
vxe-table是一个基于Vue.js的表格组件库,而fullvalidate是vxe-table提供的一个功能,用于对整个表格的数据进行一次性验证。这在进行表单提交或需要确保所有表格数据都符合特定规则时非常有用。 2. 提供vxe-table fullvalidate的基本使用方法和示例代码 要使用fullvalidate功能,你需要先确保你的表格数据已经绑定了验证规则...
.vxe-form--item-trigger-icon{ display:inline-block; margin:00.25em; transition:all0.1s; } } .vxe-form--item-valid{ position:absolute; width:100%; font-size:12px; line-height:1.2em; color:var(--vxe-form-validate-error-color);
vxe-table/types/form.d.ts Version: 3.01 kBTypeScriptView Raw 1 import { VXETableComponent } from './component' 2 import { FormItemOptions } from './form-item' 3 4 /** 5 * 表单 6 */ 7 export declare class Form extends VXETableComponent { ...
tablePage.currentPage= 1queryTableData() } asyncfunctionqueryTableData() { tagNameOptions.value=[] const { code, data, msg }=await queryAreaPolicyList({ areaName: form.areaName!= '全武汉' ?form.areaName : undefined, delFlag: form.status!== 'all' ?form.status : undefined, ...
官网地址:Vxe TableVxe UI github 链接以下 https://github.com/x-extends/vxe-table https://gitee.com/xuliangzhan/vxe-table vxe-table 是一个支持 vue2 和 vue3 的全功能表格,不仅支持常用表格功能,而且对大量数据的渲染性能也很好,功能也最强大的,不管是表格编辑、树表格,右键菜单、导入导出等都支持。