Vue.js实现动态表单生成

羅小子
羅小子
羅小子
12
文章
3
评论
十一月 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...
整理vue面试题(二) 前端

整理vue面试题(二)

vue常见面试题整理第二章: 1.vue优点? 轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 2.vue父组件向子组件传递数据? 通过属性方式传递数据,子组件...
整理vue面试题(一) 前端

整理vue面试题(一)

Vue.js是前端三大框架之一,很多公司都在使用。相比于其它两个框架,vue的学习成本是最低,也是最容易上手的。深受后端程序猿的喜爱。 一,生命周期面试题 1.什么是vue的生命周期? vue生命周期...
javascript面试题继承实现的几种方式。 前端

javascript面试题继承实现的几种方式。

在面试中经常会被问到怎么实现一个继承?实现继承有那几种方式?问这个是要考面试者对于js的基础掌握程度。 如果要实现继承,肯定需要一个父类,先定义一个父类: // 定义一个人 function Peop...
匿名

发表评论

匿名网友 填写信息

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