动态表单自定义布局(代码实现)

最新推荐文章于 2024-08-29 10:03:44 发布

原创

最新推荐文章于 2024-08-29 10:03:44 发布 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细介绍了如何使用vuedraggable和vue3-draggable-resizable库在动态表单中创建自定义布局，通过render函数实现各种控件，如输入框、下拉框等，并展示了组件化的渲染组件和其在实际项目中的应用。

动态表单

目前的动态表单基本都是基于vuedraggable拖拽库进行延伸开发
在动态表单的基础上实现自定义布局，主要是依赖于vue3-draggable-resizable库实现的移动位置和缩放等
控件的实现方式主要是利用的vue的render函数，方便维护
以下只列举其中几个控件

import {
   
    resolveComponent } from 'vue'
/**
 * 在 3.x 中，由于 VNode 是上下文无关的，不能再用字符串 ID 隐式查找已注册组件。取而代之的是，需要使用一个导入的 resolveComponent 方法
 */
 import {
   
    elementData } from '@/utils/type'
export default (h:Function, _self:any) => {
   
   
    return [h(resolveComponent('el-input'),
      {
   
   
        placeholder: _self.obj.placeholder || '这是一个输入框',
        // maxlength: parseInt(_self.obj.maxLength) || 20,
        modelValue: _self.obj.value || '',
        oninput: function(value:any) {
   
   
          _self.obj.value = value.currentTarget.value
        }
      }
    )]
}
export const inputConf:elementData = {
   
   
  // 对应数据库内类型
  type: 'input',
  // 是否可配置
  config: true,
  // 控件左侧label内容
  label: '输入框',
  placeholder: '',
  // 是否显示行内元素
  inlineBlock: false,
  // 是否必填
  require: false,
  // 最大长度
  maxLength: 10,
  // 选项内数据
  items: [{
   
    'label_value': null, 'label_name': '' }],
  value: '',
  // 表单name
  name: '',
  // 验证错误提示信息
  ruleError: '该字段不能为空',
  // 是否关联字段
  relation: false,
  // 关联字段name
  relation_name: '',
  // 关联字段value
  relation_value: '',
  // 是否被渲染
  visibility: true
}


//--------------------------------------
import {
   
    resolveComponent } from 'vue'
import {
   
    elementData } from '@/utils/type'
export default (h: Function, _self: any) => {
   
   
  return [
    h(resolveComponent('el-select'),
      {
   
   
        modelValue: _self.obj.value,
        placeholder: _self.obj.placeholder,
        filterable: true,
        onChange: function (val: String) {
   
   
          _self.obj.value = val
        }
      },
      () => _self.obj.items.map((v: {
    
     label: String, value: Number | String | Array<any> }) => {
   
   
        return h(resolveComponent('el-option'),
          {
   
   
            label: v.label,
            value: v.value
          })
      })
    )
  ]
}
export const selectConf:elementData = {
   
   
  // 对应数据库内类型
  type: 'select',
  // 是否可配置
  config: true,
  // 控件左侧label内容
  label: '下拉框',
  placeholder: '请选择',
  // 是否显示行内元素
  inlineBlock: false