实现antd的table校验,html如下,用form包裹着table,绑定相应的数据。要实现验证需要吧每个列的内容用挖槽挖出来,并用a-form-model-item包裹起来,同时绑定上相应的prop值和rules值(校验必须),通过prop来记录当前绑定的行,rules为当前列的校验规则(校验必须)。
绑定的数据如下:
这是所有的方法,通过rules的key获取校验项所需要的key字段,进行非空校验通过field字段获取prop传过来的下标,拿到当前项的值来进行校验。通过getFormTableProp方法获取当前表格所有的prop, 提交校验的时候通过antd中form组件的validateField方法,通过传入一个校验字段的数组进行校验,通过promise来实现校验成功失败的回调。通过form组件的clearValidate方法来实现重置校验。如果是设计成可编辑操作的表格,右边浮动的情况可能会导致表格高度对应不上。通过fixedTable方法,获取表格行的高度,通过匹配当前行与当前行的浮动行高度,设置为相同高度既可以解决, 编辑情况可以将这个动态设置等高的方法放在watch监听里来解决问题。