使用相同数据模板来动态渲染多个tab切换卡中不同类型的表单控件

做后台系统时,大家应该注意到了一点,那就是非常多的表单和表单控件,并且有时会好几个页面或者tab卡中的控件都是非常相似的,这时省事省力的想法促发弄一个通用的模板,比如,后端定义一个通用的数据模板,前端定义一个通用的表单控件组件,那么只要有表单的地方,前后端用模板一套,轻松搞定,美滋滋。
后端的数据模板和前端的代码简单如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以发现,其实就是一个循环而已,不同类型控件所占栅格数/控件label/prop/value都由后端定义,前端做循环展示就行,然后使用v-if做判断(因为每个控件都会被循环出来模板数据里的总条数,那么做判断在不同的地方需要什么类型的控件就取出什么类型的控件来做展示);到此,通用模板算是简单完成,但是越做到后面越发现有很多的弊端。

限制:如果只是简单展示还好,当表单中有多个控件是联动的或者多选或者不同条件时不同控件的展示与隐藏等,前端的功能实现就显得很复杂,就还不如直接写控件结构,所以尝试亦到此为止。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值