本文我們將介紹如何使用 FormMaking 表單設(shè)計(jì)器來引入自己的高級(jí)組件，并可以通過設(shè)計(jì)器進(jìn)行配置堡赔，處理事件等操作识脆。
封裝分頁數(shù)據(jù)表格組件
我們將封裝 一個(gè)分頁數(shù)據(jù)表格組件，組件采用 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灼捂，可以將事件拋出到設(shè)計(jì)器中進(jìn)行配置
emit('on-load', index)
}
onMounted(() => {
emit('on-load', currentPage.value)
})
watch(() => props.modelValue, (val) => {
data.value = val
})
</script>
引入到設(shè)計(jì)器
注冊(cè)組件
首先應(yīng)該在自己項(xiàng)目中進(jìn)行組件的注冊(cè)。
import CustomPaginationTable from 'PaginationTable.vue'
app.use(FormMakingV3, {
components: [{
name: 'custom-pagination-table',
component: CustomPaginationTable // 自定義組件
}]
})
也可以使用Vue.component 進(jìn)行組件的注冊(cè)
app.component('custom-pagination-table', CustomPaginationTable)
設(shè)計(jì)器配置
<template>
<fm-making-form
:custom-fields="customFields"
>
</fm-making-form>
</template>
<script>
export default {
data() {
return {
customFields: [
{
name: '分頁數(shù)據(jù)列表',
el: 'custom-pagination-table',
options: {
defaultValue: [],
labelWidth: 0,
isLabelWidth: false,
hidden: false,
dataBind: true,
validator: '',
extendProps: {
columns: [] // 用于配置表格的列
}
},
events: {
onLoad: '' // 定義設(shè)計(jì)器可以配置的事件换团，處理組件 emit 的事件
}
}
]
}
}
}
</script>
然后在自定義字段中就展示出來了
image.png
配置組件表格
表格列配置
在字段屬性中對(duì)擴(kuò)展屬性配置 進(jìn)行設(shè)置
image.png
image.png
數(shù)據(jù)加載
數(shù)據(jù)加載的 on-load事件悉稠，我們?cè)谧远x組件中通過emit拋出到設(shè)計(jì)器中進(jìn)行配置，在字段屬性-動(dòng)作設(shè)置中添加onLoad事件配置如下：
image.png
效果展示
我們來查看下最后的效果
image.png
