基于vue Ant-Design 的表单设计器，快速开发

基于vue Ant-Design 的表单设计器，快速开发

>

本来想写个详解的，一翻API，算了吧ε=(´ο｀)))，写个入门教程吧。

这样写， a-table 就能简单地把数据原样渲染上去，这里有两个参数介绍一下：

有时候只是把数据渲染上去还不能满足要求，比如要显示性别，后端传过来的数据格式是： sex: true , true代表男，false代表女，总不能把true，false渲染上去吧。

这时候就要自定义了， a-table 的自定义使用了插槽的概念：

1、安装 ant-design-vue

npm i ant-design-vue --save

2、在 mainjs 中引入

3、安装 antd-theme-generator ， less 插件

npm i antd-theme-generator --save

npm i less --save

npm i less-loader --save

4、在 src 目录下新建 styles 文件夹，里面新建 indexless , variablesless 文件

variablesless 内容

indexless 文件为空

5、项目根目录下新建 colorjs 文件

6、在 publish 文件夹下 indexhtml 文件中添加以下行，必须添加到 body 下

7、修改 packagejson 的启动和打包指令

8、使用

原理：通过 windowlessmodifyVars 方法，去动态的改变 less 变量。然后在调用 colorjs ，在 pulish 中生成一个 colorless 文件，在 indexhtml 中重新引入一下，就实现了动态换肤功能。

ok，功能实现，结束。

路由和菜单是组织起一个应用的关键骨架，pro 中的路由为了方便管理，使用了中心化的方式，在 ==routerconfigjs== 统一配置和管理。

目前脚手架中所有的路由都通过 ==routerconfigjs== 来统一管理，在 ==vue-router== 的配置中我们增加了一些参数，如 ==hideChildrenInMenu==,==metatitle==,==metaicon==,==metapermission==，来辅助生成菜单。其中：

具体请参考 >

1父组件向子组件传递数据

(1)$parent方法，在子组件中可以直接访问该组件的父实例或组件。

(2)$root方法，获取根组件对象。

2子组件向父组件传递数据

$children：返回的是所有子组件对象的数组，再通过下标获取指定的子组件。当组件顺序不会发生变化时，用 $children；否则用 $refs。 注意 ：$refs：返回的是一个对象，对象中包含所有带有ref属性的子组件。 注意：不是只有组件才可以添加ref属性，任何标签都可以加ref属性 。

注意 ：在父组件创建完成到挂载完成之间，包含完整的子组件的生命周期。父级组件在mounted生命周期函数内，才能获取到$children信息；在子组件的created生命周期函数中，可以获取到父组件的数据。顺序：父级created => 子级1created => 子级2created => => 子级1mounted => 子级2mounted => 父级mounted

常用的PC端组件库有： element-ui 、 iView 、 ant-design vue

常用的移动端组件库： Vant 、 Mint-ui

注意 ：第三方组件库，必须在Vue的下面引入

效果：

注意 ：非 template/render 模式下，一些组件名在实际使用中需使用 i-小写组件名 格式（例如 Button组件 需使用 i-button）；一些组件标签名需要改成小写（例如 Tabs组件 需使用 tabs ）。具体情况参考官网提示。

效果：

效果：

1使用 suffixIcon 参数 =》slot 放在自定义的icon或标签上

1需配合 a-layout-sider中collapsible一起使用

2menu 中自定义图标收缩显示有问题，还需注意 给自定义icon添加class = "antion"，不给设置会如图，收缩不全

以上就是关于基于vue Ant-Design 的表单设计器，快速开发全部的内容，包括:基于vue Ant-Design 的表单设计器，快速开发、Vite中使用Ant Design Vue3.x框架、Ant-Design-vue的a-table入门等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！