Common Components
On this page

给表单项标签添加前缀/后缀 ​

NForm 组件支持给表单项标签添加前缀/后缀, 通过 labelPrefix 和 labelSuffix 属性(或名为 ${fieldName}labelPrefix/${fieldName}labelSuffix 的插槽)来设置.

示例 ​

TIP

labelPrefix 和 labelSuffix 属性可以是字符串或者 VNode 对象.

编辑行 ​

javascript
import { ref } from "vue";
import { FormItemControlType } from "@nbicc/common-components";
import { QuestionOutlined, ExclamationOutlined } from "@ant-design/icons-vue";

const data = ref({});
const fields = ref([
  {
    name: "onlyPrefix",
    type: FormItemControlType.INPUT,
    label: "前缀(field)",
    labelPrefix: () => "➡"
  },
  {
    name: "onlySuffix",
    label: "后缀(slot)",
    type: FormItemControlType.INPUT
  },
  {
    name: "prefixAndSuffix1",
    label: "前缀 + 后缀(field)",
    type: FormItemControlType.INPUT,
    labelPrefix: () => "➡",
    labelSuffix: () => "⬅"
  },
  {
    name: "prefixAndSuffix2",
    label: "前缀 + 后缀(slot)",
    type: FormItemControlType.INPUT
  },
  {
    name: "withTooltip",
    label: "文本提示",
    type: FormItemControlType.INPUT
  }
]);
html
<template>
  <n-form v-model:data="data" :fields="fields" :labelCol="{ flex: '180px' }">
    <template #onlySuffixLabelSuffix>
      <span style="color: red"><QuestionOutlined /></span>
    </template>
    <template #prefixAndSuffix2LabelPrefix>
      <span style="color: red"><QuestionOutlined /></span>
    </template>
    <template #prefixAndSuffix2LabelSuffix>
      <span style="color: red"><ExclamationOutlined /></span>
    </template>
    <template #withTooltipLabelSuffix>
      <a-tooltip title="提示文本">
        <span>
          <QuestionOutlined />
        </span>
      </a-tooltip>
    </template>
  </n-form>
</template>