FormMaking自定字段高级用法（FormMaking自定字段高级用法）
FormMaking表单设计器是一款与行业无关的通用表单设计器前端解决方案，表单设计器包含设计器（MakingForm）和生成器（GenerateForm）两个模块，设计器主要负责表单的动态设计，可以通过拖拽的形式设计生成表单页面，生成器则负责对表单页面的渲染和数据的回写。
如果你对FormMaking不太了解可能会把FormMaking当成是单纯页面设计器，只为了减少重复的表单，稍微有点经验的前端开发，通过简单的Copy Paste就能很快做出一个固定的表单页面。而FormMaking做的是一整套与表单相关的前端方案，包含了表单的动态设计，表单渲染，数据回写，数据校验，事件支持，css自定义，动作面板等丰富的功能，而这些所有的功能只需要一个import 命令将MakingForm和GenerateForm引入到项目中，你的项目就可以拥有这些功能。
FormMaking新功能 自定义字段高级用法FormMaking基础功能可以看之前都介绍。
本文我们将介绍如何使用 FormMaking 来引入自己的高级组件，并可以通过设计器进行配置，处理事件等操作
封装分页数据表格组件
我们将封装 一个分页数据表格组件，组件采用 ElementPlus TableV2
<template>
<div>
<div style="height: 400px">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
:columns="columns"
:data="data"
:width="width"
:height="height"
fixed
/>
</template>
</el-auto-resizer>
</div>
<el-pagination
background
layout="prev, pager, next"
:total="1000"
v-model:current-page="currentPage"
@current-change="loadPageData"
/>
</div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
const props = defineProps({
modelValue: {
type: Array,
default: () => []
},
columns: {
type: Array,
default: () => []
}
})
const emit = defineEmits(['on-load'])
const data = ref(props.modelValue)
const currentPage = ref(1)
const loadPageData = (index) => {
// 通过 emit，可以将事件抛出到设计器中进行配置
emit('on-load', index)
}
onMounted(() => {
emit('on-load', currentPage.value)
})
watch(() => props.modelValue, (val) => {
data.value = val
})
</script>
引入到设计器
注册组件
首先应该在自己项目中进行组件的注册。
import CustomPaginationTable from 'PaginationTable.vue'
app.use(FormMakingV3, {
components: [{
name: 'custom-pagination-table',
component: CustomPaginationTable // 自定义组件
}]
})
也可以使用Vue.component 进行组件的注册
app.component('custom-pagination-table', CustomPaginationTable)
设计器配置
<template>
<fm-making-form
:custom-fields="customFields"
>
</fm-making-form>
</template>
<script>
export default {
data() {
return {
customFields: [
{
name: '分页数据列表',
el: 'custom-pagination-table',
options: {
defaultValue: [],
labelWidth: 0,
isLabelWidth: false,
hidden: false,
dataBind: true,
validator: '',
extendProps: {
columns: [] // 用于配置表格的列
}
},
events: {
onLoad: '' // 定义设计器可以配置的事件，处理组件 emit 的事件
}
}
]
}
}
}
</script>
然后在自定义字段中就展示出来了
设计器界面
配置组件表格
表格列配置
在字段属性中对扩展属性配置 进行设置
数据加载
数据加载的 on-load事件，我们在自定义组件中通过emit抛出到设计器中进行配置，在字段属性-动作设置中添加onLoad事件配置如下：
效果展示
我们来查看下最后的效果
效果图
更多关于FormMaking详情可移步：
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
