在Vue2.0中集成Vform动态表单

原创

已于 2024-07-23 18:11:14 修改 · 5.6k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-08-09 00:11:16 首次发布

最近由于业务需要，要做一个导出类似Word登记表的功能，所以考虑使用Variant Form动态表单来做前端表单的搭建、表单交互以及数据收集等功能。

Variant Form实际上是一个低代码表单，支持Element UI组件库，能够大大提高我们的开发效率以及用户体验，这也是我们选择这一组件的目的。

我们这次的功能涉及：Variant Form表单的引入、使用以及导出Word文档，我将全程记录使用过程中遇到的问题以及难点。

Variant Form采用的是本地引入的方式，通过拉取GitHub的项目包，打包后生成两个本地文件，然后引入我们的项目中使用。

注意：Variant Form是依赖于Element UI的，所以项目中必须有Element UI框架。

下载依赖：yarn

编译打包：yarn run lib

（1）执行完上一步之后，要在项目的dist/lib目录下找到下下面这两个文件

（2）在项目根目录下新建lib/vform文件夹，将上述两个文件放进去

import vform from '../lib/vform/VFormDesigner.umd.min.js'
import '../lib/vform/VFormDesigner.css'
Vue.use(vform) //同时注册

4 条评论