Vxe UI vue vxe-form-design 表单设计器

vxe-pc-ui Vxe UI vue vxe-form-design 表单设计器

安装 Vxe UI

官方文档
查看 github、gitee

 // ...
 import VxeUI from 'vxe-pc-ui'
 import 'vxe-pc-ui/lib/style.css'
 // ...

 // ...
 createApp(App).use(VxeUI).mount('#app')
 // ...

vue 表单设计器分为表单设计器、列表设计器

功能

支持自定义左侧控件
支持自定义控件分组
支持表单自定义
支持PC端、移动端设计，一套 JSON 通用
支持行列布局
支持子表
支持表单关联

设计器-效果预览：

使用

vxe-form-design 设计器组件
vxe-form-view 视图渲染组件

<template>
  <div>
    <div class="row-wrapper">
      <p>
        <vxe-button status="primary" @click="clickEvent">点击生成表单</vxe-button>
      </p>
      <div class="design-demo">
        <div class="design-preview">
          <vxe-form-view v-model="formData" :config="designConfig" @submit="submitEvent">
            <template #footer>
              <vxe-button type="submit" status="primary" content="提交"></vxe-button>
              <vxe-button type="reset" content="重置"></vxe-button>
            </template>
          </vxe-form-view>
        </div>
        <div>
          <vxe-form-design ref="formDesignRef" :height="800" showMobile />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const formDesignRef = ref()
const designConfig = ref()
const formData = ref()
const clickEvent = () => {
  const $formDesign = formDesignRef.value
  if ($formDesign) {
    designConfig.value = $formDesign.getConfig()
  }
}
const submitEvent = () => {
  debugger
}
</script>

<style lang="scss" scoped>
.design-demo {
  display: flex;
  flex-direction: row;
  min-width: 1400px;
  & > div {
    width: 50%;
    flex-shrink: 0;
    padding: 0 10px;
    height: 800px;
    overflow: auto;
    & > div {
      min-height: 100%;
      padding: 10px;
      border: 5px solid #47494c;
    }
  }
}
</style>