管理系统的前端使用的是avue,自然的表单设计器使用的avue-form-design，但是其开源代码中不支持表格模式，比如想做个学生档案样式的比较困难。于是本周末做个demo方案试试看。欢迎有兴趣的讨论方案。遇到最大的问题就是后端是结构化存储的，需要对前端数据结构的解析，目前后端支持表单，动态（子表单），分组的解析，为了减少后端解析，把表格当成一种特殊的分组进行处理，这样后端就不用改动代码。
方案步骤：
1.分组group结构新增isTable字段，用以区别之前的分组，为了方便“新”的group组件简称table。
2.table组件拖拽的其他组件可以设置其在table中的位置：行，跨行、列、跨列【包含移动端和PC端】，由于PC端和移动端可能渲染的不一样，没有使用交互体验更好的拖拽设计（网上有）。
3.表单模型保存，因为与group数据结构一样，所以这块前后端都基本没有改动。
4.获取表单模型后的渲染，需要做数据转换，来满足渲染成table所需格式
5.table渲染组件，自定义组件参照子表单方式写。如果需要修改样式，可以在表单中根据table组件的className写样式
设计页
移动端渲染页
PC端渲染页
感谢Avue和avue-form-design
代码地址：https://gitee.com/aseyun/jr-backend.git
演示地址： http://end.aseyun.com 账号：jradmin/111111
服务器部署了很多服务，偶尔服务会停了。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。