基于element-ui开发的动态表单设计组件

最新推荐文章于 2024-08-15 14:52:36 发布

置顶

XDLK2

最新推荐文章于 2024-08-15 14:52:36 发布

阅读量1k

点赞数

文章标签： vue 前端 js

本文链接：https://blog.csdn.net/XDLK2/article/details/106663470

版权

本文介绍了一款基于element-ui 2.x的动态表单设计组件，包括表单设计器和查看器，提供了丰富的表单组件，如输入型、选择型和布局型组件，并支持自定义操作和数据源。用户可以进行自定义新增或删除组件，以及配置自定义数据源，如从网络接口获取下拉选项。

摘要由CSDN通过智能技术生成

基于element-ui开发的动态表单设计组件

介绍一款基于element-ui 2.x开发的动态表单设计器组件，以及表单查看组件。点击预览

github地址：https://github.com/xlkai/yz-dync-form 点击跳转

效果图：
在这里插入图片描述

丰富特性

基于element-ui 2.x；

内含丰富表单组件；

可以实现自定义新增或删除表单组件；

可以自定义实现部分组件的数据来源操作

支持组件

表单设计器，包含以下组件：

输入型组件：单行文本、多行文本、密码框、计数器

选择型组件：下拉单选、下拉多选、单选框组、多选框组、时间选择、时间范围、日期选择、日期范围、开关

布局型组件：行容器

安装

npm install element-ui -S
npm install vuedraggable -S
npm install yz-dync-form -S

快速开始

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

import YzDyncForm from 'yz-dync-form'
import 'yz-dync-form/lib/styles/index.css'
// or 
import 'yz-dync-form/packages/styles/src/index.scss'

Vue.use(Element)
Vue.use(YzDyncForm)

// or
import {
   
  FormDesign,
  FormView,
  FormDialogView
  // ...
} from 'yz-dync-form'

Vue.use(FormDesign)
Vue.use(FormView)
Vue.use(FormDialogView)

组件 - 表单设计器

内含丰富组件

<template>
  <yz-form-design
    :height="domHeight"
    :clone="clone"
    @submit="onSubmit"/>
</template>

<script>
export default {
  data() {
    return {
      domHeight: 600 //表单设计器整体高度
    }
  },
  methods: {
    clone(form) {
      // 表单配置自定义格式化