Vue.js实现动态表单生成

羅小子
羅小子
羅小子
7
文章
1
评论
十一月 20, 202007:42:22 评论
摘要

最近公司有个需求,根据后台返回的json数据来实现前端表单的生成,我的逻辑是和后端同事约定每一个控件的名字,前端根据这个名字来实现展示或者不展示。

定义表单控件组件

在components文件夹下面新建一个名为form的文件并新建一个index.vue的文件作为父组件和一个isform.js的文件用于修改子组件名称,在文件里面分别把所有表单控件建成一个独立的.vue文件作为子组件。所有表单控件文件建立好后,在index.vue中引入。

Vue.js实现动态表单生成

引入组件

在所有组件都键了好后,需要使用vue的component标签和is属性来进行组件的切换。

属性详解:展开

  • component:它是Vue内置的标签,它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件。
  • is:用于动态组件且基于 DOM 内模板的限制来工作。

首先在isform.js里面导出所有控件组件,通过default as 修改组件名称,使其和后端返回内容保持一致。

//  文本框
export { default as eip_input } from "./input-form.vue";
// 步进器
export { default as eip_spinner } from "./spinner-form.vue";
// 多行文本框
export { default as eip_textarea } from "./textarea-form.vue";
// 单选
export { default as eip_radiobuttonlist } from "./radio-form.vue";
// 复选框
export { default as eip_checkboxlist } from "./checkbox-form.vue";
// 下拉框
export { default as eip_combobox } from "./select-form.vue";
// 日期选择
export { default as eip_datepicker } from "./date-form.vue";
// 上传
export { default as eip_upload } from "./upload.vue";
// 部门
export { default as eip_dep } from "./dep.vue";
// 用户
export { default as eip_group } from "./group.vue";
// 人员
export { default as eip_user } from "./user.vue";
// 编辑型按钮
export { default as eip_buttonedit } from "./buttonedit-form.vue";
// 下拉树
export { default as eip_treeselect } from "./treeselect.vue";

然后在index.vue文件中引入isform.js并且在components中注册组件。

import * as itemElements from "@/components/form/isform.js";
export default {
  components: itemElements
}

最后在template里面使用<component :is="后端返回的数据"></component>;

<div v-for="(item, ind) in formList" :key="ind">
      <div v-if="item.ismain">
        <component
          v-for="(formObj, index) in item.fileds"
          :key="formObj.ID"
          :is="formObj.widgets_type"
        ></component>
      </div>
</div>

到这儿就算大功告成了。就实现了通过后端返回的JSON数据,来动态展示不同控件。完整代码我就不贴了,基本上按照这个来都能成功。

继续阅读
羅小子
Vue.js自定义指令使用 前端

Vue.js自定义指令使用

Vue.js除了核心功能默认内置的指令 (v-model 和 v-show),Vue也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 下面定义了一个v-t...
for in 和 for of的区别 前端

for in 和 for of的区别

重点内容: for in 取 key; for of 取 value for of 只能用于数组遍历,for in还可以用于对象属性的遍历 遍历数组: let array = console.log(...
解决vue-core-video-player2504错误 前端

解决vue-core-video-player2504错误

介绍vue-core-video-player是一款轻量级的视频播放器。支持HLS 解码插件。 在使用这个插件的过程中发现,当数据在created里面初始化数据时,播放器不能播放,控制台输出2504(...
vue-element-admin关闭当前页返回上一页 前端

vue-element-admin关闭当前页返回上一页

摘要vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: