jeecg自定义From组件

引言

在jeecg-vue中已经封装了很多常用的form组件(button,Input)，以及一些业务组件(部门选择，用户选择,字典组件)。如果有业务需求要自定义属于自己业务组件该如何操作呢？

export const formSchema: FormSchema[] = [
  // TODO 主键隐藏字段，目前写死为ID
  {label: '', field: 'id', component: 'Input', show: false},
  {
    label: '手机号',
    field: 'mobileNumber',
    component: 'Input'
  }
]  

步骤

• 创建自定义组件文件 在该路径下src/components/Form/src/jeecg/components创建自己的自定义Form组件文件。
  比如MyInput.vue

<template>
    <Input type="text" :value="value" @input="onInput"></Input>
</template>
<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
    name:"MyInput",
    props: {
        value:String
    },
    emit:['input'],
    setup(props, (emit)){
      function onInput(e){
        emit("input", e.target.value)
      }
      return {onInput}
    }
})
</script>
<style scoped>
</style>>

• 在componentMap进行注册

//src/components/Form/src/componentMap.ts
import MyInput from './jeecg/components/MyInput.vue'

componentMap.set('MyInput', MyInput);

//在/src/components/Form/src/types/index.ts路径下添加类型
| 'MyInput'

• 在表单中使用

export const formSchema: FormSchema[] = [
  // TODO 主键隐藏字段，目前写死为ID
  {label: '', field: 'id', component: 'Input', show: false},
  {
    label: '手机号',
    field: 'mobileNumber',
    component: 'MyInput'
  }
]