显示序号

问卷、登记、考试一类表单需要在题目前面带上序号。FormCreate 从 v3.3.5 起，通过全局配置 showNumber 和 numberColor 生成序号。序号画在表单项标题前面，标题原文和提交数据保持原样。

各 UI 框架和移动端用法相同。配置方式见表单全局配置。

配置项

属性名	类型	默认值	说明
showNumber	`Boolean \| 'decimal' \| 'chinese'`	-	`true`、`'decimal'` 显示「1. 」；`'chinese'` 显示「一、」；`false` 或不设置则不显示
numberColor	`String`	-	序号颜色，写入 CSS 变量 `--fc-number-color`。留空则跟随标题文字颜色

数字序号

showNumber 设为 true 或 'decimal' 时，按表单项在页面中的出现顺序编号，格式为「1. 」「2. 」。

const options = {
  showNumber: true, // 与 'decimal' 相同
}

中文序号

showNumber 设为 'chinese' 时，格式为「一、」「二、」。十位及以后按中文习惯进位，例如「十、」「十一、」「二十、」。

const options = {
  showNumber: 'chinese',
}

中文数字由浏览器 CSS 计数器样式 simp-chinese-informal 生成，当前主流浏览器均可显示。

序号颜色

numberColor 只作用于序号，标题文字颜色不变。留空或不传时，序号跟随标题文字颜色。

const options = {
  showNumber: true,
  numberColor: '#1677ff',
}

颜色写在表单根节点的 --fc-number-color 上，并与 form.style 合并：form.style 是字符串时拼到末尾，是对象时一并展开，是数组时追加一项。

哪些字段会编号

序号加在已经渲染出来的标题上。下面这些字段不显示序号，后面的字段会按顺序继续编号：

没有 title，或 title 为空字符串
单个字段 title.show 为 false
全局 option.title 为 false（全部标签被关掉）
hidden: true 的字段
display: false 的字段

下面示例里，页面上应看到「1. 第一题」「2. 第四题」。空标题、隐藏字段和 display: false 的字段都跳过。

修改 option.showNumber 或 option.numberColor 后，表单按新配置重新渲染。

子表单

分组表单和子表单会继承外层 option。外层开启序号后，每一组内部单独从 1 开始，不占用外层序号。外层字段仍按自己的顺序编号。

某一组不需要序号时，在该组的 props.options 里关掉。传入 options 后，组内的提交、重置按钮也要自行关闭：

{
  type: 'group',
  field: 'contacts',
  title: '联系人',
  props: {
    options: {
      showNumber: false,
      submitBtn: false,
      resetBtn: false,
    },
    rule: [
      {type: 'input', field: 'name', title: '姓名'},
    ],
  },
}

分组表单卡片风格左上角的组号是组件自带的组序号，和这里的序号相互独立。序号仍然加在组内每个字段的标题前。

自定义样式

组件样式表负责绘制序号。需要改分隔符或字重时，覆盖下面的伪元素即可。移动端根节点类名是 .form-create-m，其余框架是 .form-create。

css

.form-create.is-numbered .fc-form-title::before {
  content: counter(q) '、';
  font-weight: 600;
  color: var(--fc-number-color, inherit);
}


.form-create.is-numbered.is-number-chinese .fc-form-title::before {
  content: counter(q, simp-chinese-informal) '、';
}

is-numbered 表示已开启序号，is-number-chinese 表示中文序号。

显示序号 ​

配置项 ​

数字序号 ​

中文序号 ​

序号颜色 ​

哪些字段会编号 ​

子表单 ​

自定义样式 ​

相关阅读 ​