fs-admin/src/components/form/ElFormLayout.vue

<script setup lang="ts">
import type { BasicForm, BasicFormItem } from '@/types/form'
import { containerTypes } from '@/utils/constants'

interface Props {
  formItem: BasicFormItem
  formConfig: BasicForm
  formData: any
}
const props = defineProps<Props>()

const children = computed(() => {
  return props.formItem.children?.filter(item => !item.hidden)
})
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="item.span" v-bind="item.props" v-for="(item, index) in children" :key="index">
      <component
        :is="'el-' + item.type"
        v-if="containerTypes.includes(item.type)"
        v-model="item.value"
        v-bind="item.props"
        :children="item.children"
        :formItem="item"
        :formData="formData"
        :formConfig="formConfig"
        v-on="item.events || {}"
      >
        <template #[slot.alias]="slotProps" v-for="slot in item.slots" :key="slot.alias">
          <slot :name="slot.alias" v-bind="slotProps"></slot>
        </template>
      </component>
      <template v-else>
        <el-row :gutter="20">
          <el-col v-for="child in item.children" :span="child.span || formConfig.span || 12" v-show="!child.hidden">
            <el-form-item :label="child.label" :rules="child.rules" :prop="child.name">
              <form-comp :item="child" v-model="formData[child.name]">
                <template #[slot.alias]="slotProps" v-for="slot in child.slots" :key="slot.alias">
                  <slot :name="slot.alias" v-bind="slotProps"></slot>
                </template>
              </form-comp>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped></style>