Vben框架单页面多个table,form如何处理

451 阅读1分钟

记录工作中值得注意的开发需求或bug解决方案

基于后端管理系统前提,常规页面交互基本都是顶部是表单查询区域,中间是一个table表格展示数据,再加几个表头按钮或操作列按钮就能实现功能。

image.png 按照vben的文档,我们很容易就能实现,首先注册一个table,然后在template中使用

image.png image.png

那么当有一个页面是多个table的时候,或多个form时候该如何实现,vben的案例demo中是没有的,在文档中有提到了使用props方式声明,所以扩展思路从而实现。案例需求如下:

image.png 实现方案如下:

  • table1:依旧采用useTable方式声明,和api正常使用
  • table2-到tableN: 采用props方式声明,以及ref关联,从定义新的table 代码如下:

image.png

image.png

image.png

image.png

按照以上的方案就能解决业务需求,多个Form也是一样的道理。

image.png