自定义组件

该字段可以通过创建一个 Vue 模板来自定义组件，在字段属性面板 - 自定义模板 配置中点击设置模板。

TIP

这里不能创建 Vue 单文件组件，只支持 Vue 模板字符串，即不能在这里使用 <script>、<template>、<style> 标签，需要自己封装在组件中。

静态内容

即不绑定表单数据，可以自定义一些表单中的静态元素。

<div style="border: 1px solid #ccc; width: 300px; height: 100px;">
  自定义模板
</div>

绑定数据

如果需要输入内容并且获取，则需要在模板中使用 v-model="dataModel" 进行数据绑定，（必须保证组件可以使用 v-model 进行数据双向绑定）如下：

<div style="border: 1px solid #ccc; width: 300px; height: 100px;">
  <!-- v-model="dataModel" 是必须的，这样才能绑定数据 -->
  <el-input v-model="dataModel" />
</div>

NOTE

这里必须使用 dataModel 变量进行绑定。

事件处理

虽然这里只能创建 Vue 模板字符串，但是可以在模板中调用 JS 动作面板 的方法。

<el-button type="text"
  @click="triggerEvent('editButton', {count: 1})"
> 编辑 </el-button>

// Function Name: editButton
function () {
  const { $eventArgs } = arguments[0]
  // $eventArgs: {count: 1}
}

NOTE

这里方法的参数需要通过 $eventArgs 变量进行获取。