自定义字段高级用法

本文我们将介绍如何引入自己的高级组件，并可以通过设计器进行配置，处理事件等操作。

封装分页数据表格组件

我们将封装一个分页数据表格组件，组件采用 ElementPlus TableV2 。

vue

<template>
  <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"
  />
</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)

设计器配置

vue

<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>

查看效果

配置组件表格

表格列配置

在字段属性面板中对 扩展属性配置 进行设置

扩展属性配置

json

{
	"columns": [
		{
			"title": "列表1",
			"dataKey": "c1",
			"width": 200
		},
		{
			"title": "列表2",
			"dataKey": "c2",
			"width": 200
		},
		{
			"title": "列表3",
			"dataKey": "c3",
			"width": 200
		},
		{
			"title": "列表4",
			"dataKey": "c4",
			"width": 200
		}
	]
}

数据加载

数据加载的 on-load 事件，我们在自定义组件中通过emit抛出到设计器中进行配置，在字段属性面板-动作设置中添加 onLoad 事件配置如下：

function () {
  // $eventArgs 变量存储了 emit 事件的参数
  const { $eventArgs } = arguments[0]

  const currentPage = $eventArgs[0]

  let listdata = Array.from({length: 10}).map((_, index) => {
    let row = (currentPage - 1) * 10 + (index + 1)

    return {
      c1: `Row ${row} Column 1`,
      c2: `Row ${row} Column 2`,
      c3: `Row ${row} Column 3`,
      c4: `Row ${row} Column 4`
    }
  })

  this.setData({
    list: listdata
  })
}

查看效果

自定义字段高级用法 #

封装分页数据表格组件 #

引入设计器 #

注册组件 #

设计器配置 #

配置组件表格 #

表格列配置 #

数据加载 #