Skip to content
On this page

自定义组件

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

TIP

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

静态内容

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

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

绑定数据

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

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

NOTE

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

事件处理

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

vue
<el-button type="text"
  @click="triggerEvent('editButton', {count: 1})" 
> 编辑 </el-button>
js
// Function Name: editButton 
function () {
  const { $eventArgs } = arguments[0]
  // $eventArgs: {count: 1}
}

NOTE

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