vue3在table里使用elementUI的form表单验证

        常规情况下。rules和formItem是一对一的。例如下面的情况,判断表单内的测试1和测试2是否为空。



        但是,如果在table中就按照常规的写法如下会发现不管如何输入或删除都将触发valid=false校验。如果在validator_isEmpty中打印value值会发现,value一直未undefined。




        所以使用下面的方式。但是有几个重点。

1、外层的el-form的model需要关联到tableData.data,否则使用validate方法将无法触发

2、去掉外层el-form的rules属性

3、对el-table-column里的el-form-item添加rules属性,其中rules中的validator采用bind的方式传递行参数

4、对el-table-column里的el-form-item中prop属性需要保留

之后的操作就跟普通的form验证一样




 

你可能感兴趣的:(elementui,vue.js,前端)