# Slots 表单插槽
示例
<template>
<page class="filter-table-demo" class-name="hw100">
<panel
:title-fixed="true"
title="表具详述"
class="h100 w-2-1"
>
<common-form
ref="form"
v-model="formData"
:fields="formFields"
class="pl15 pr0"
>
<!-- 插槽示例 -->
<template #meterNo-el-input-append>
<el-button size="small" icon="el-icon-search"></el-button>
</template>
</common-form>
</panel>
</page>
</template>
<script>
export default {
data () {
return {
formData: {},
formFields: [{
label: '表具编号',
field: 'meterNo',
value: ''
}]
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# 插槽列表
插槽名称 | 插槽说明 | 携带数据 | 默认内容 |
---|---|---|---|
{field}-label-prefix | 字段描述文本前缀 | field 当前字段配置 | 无 |
{field}-label | 字段描述文本 使用该插槽将替换默认的字段描 述文本输出 | field 当前字段配置 | 字段描述文本 |
{field}-label-suffix | 字段描述文本后缀 | field 当前字段配置 | 无 |
{field}-input-prefix | 输入域前缀 | field 当前字段配置 | 无 |
{field}-input | 输入域 使用该插槽将替换默认的输入域 | field 当前字段配置 | 字段输入域 |
{field}-input-suffix | 输入域后缀 | field 当前字段配置 | 无 |
split-{title} | 表单分段插槽 使用该插槽将替换默认的分段 title 文本输出 | splitBar 当前分段配置 | 表单分段 title 文本 |
# input 元素专用插槽
以下插槽对应 element-ui 框架 el-input 组件的相关插槽 (opens new window)。
插槽名称 | 插槽说明 | 携带数据 | 默认内容 |
---|---|---|---|
{field}-el-input-prefix | el-input 组件的 prefix 插槽 | field 当前字段配置 | 无 |
{field}-el-input-suffix | el-input 组件的 suffix 插槽 | field 当前字段配置 | 无 |
{field}-el-input-prepend | el-input 组件的 prepend 插槽 | field 当前字段配置 | 无 |
{field}-el-input-append | el-input 组件的 append 插槽 | field 当前字段配置 | 无 |
← 表单分段 Filter Bar 筛选器 →