Custom Component

This field can be customized by creating a Vue template component, click Setting in the Field Properties panel - Custom Template for the template configuration.

TIP

Vue single-file components cannot be created here. Only Vue template strings are supported, that is, <script>, <template>, and <style> tags cannot be used here. They need to be wrapped in the components themselves.

Static Content

Static content without binding form data, you can customize some static elements in the form.

<div style="border: 1px solid #ccc; width: 300px; height: 100px;">
    self-defined template
</div>

Binding Data

If you want to input content and get it, you need to use v-model="dataModel" for data binding in the template (you must ensure that the component can use v-model for data binding) as follows:

<div style="border: 1px solid #ccc; width: 300px; height: 100px;">
  <!-- v-model="dataModel" is necessary to bind the data -->
  <el-input v-model="dataModel" />
</div>

NOTE

The dataModel variable must be used for binding here.

Event Handling

Although only Vue template strings can be created here, you can call methods from the JS Action Panel in the template.

<el-button type="text"
  @click="triggerEvent('editButton', {count: 1})" // [!code hl]
> Edit </el-button>

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

NOTE

The parameters of this method need to be obtained through the $eventArgs variable.