移动端表单类组件

移动端提供的表单样式，如下图所示

• 右侧内容右对齐

• 右侧内容左对齐

• 标签和内容分成上下两行

快速布局

表单组件提供“快速布局”能力，快速生成一个表单。快速布局支持

• 选择数据组件的数据列
• 选择数据列使用的编辑器
• 重置数据列的显示名称（表单项名称）
• 表单中包括卡片（可选）

表单

表单使用：表单、表单项等组件组成。页面结构如下图所示

源码如下

    <vantui:CellGroup class="x-form" id="fieldGroup2" >
        <vantui:Cell id="cell12" title="{restData0.label('name')}" />
        <vantui:Cell id="cell13" title="{restData0.label('firstClass')}" />
        <vantui:Cell id="cell14" title="{restData0.label('secondClass')}" />
    </vantui:CellGroup>

表单组件

表单组件提供统一设置表单样式能力，包括

• 标签文本对齐方式：左对齐、右对齐
• 标签和控件位置：
  • 标签在上，控件在下
  • 标签和控件在一行
• 内容文本对齐方式：左对齐、右对齐
• 是否显示外边框：边框默认为白色
• 是否展示为圆角卡片风格，运行效果如下图所示

表单项组件

表单项组件用来显示数据列的标签（标题）和控件（编辑器），提供下面几项能力：

• 感知数据组件的规则设置
  • 数据列设置为必填时，标题前面会显示红星
  • 数据列内容验证失败时，显示提示信息（红色文字）
• 标题下面可以设置“显示内容”，左侧可以设置“左侧图标”
• 编辑器右侧可以设置“右侧图标”，还设置可以“扩展区”
• 样式
  • 支持两种尺寸的文字
  • 定义标题区宽度
  • 定义标题样式
  • 是否显示下边框
• 点击反馈：点击时的一瞬间，背景变成灰色

表单项组件各分区如下图所示

输入类组件

系统在页面上提供数据组件，和表单类组件绑定后，实现双向数据绑定

• 写入数据：用户录入，或通过代码赋值后，数据会写入数据组件的当前行
• 读取数据：表单类组件实时显示数据组件当前行的数据，数据改变后，会立即显示新的数据

输入类组件包括：输入框（多行文本、日期时间选择）、步进器、滑块、开关、多选框、评分、富文本编辑等组件

输入类组件是最简单的表单类组件。它们通过设置“绑定数据列”属性绑定到一个数据组件的列上，从而实现双向数据绑定。

文本输入

• 输入框（单行文本）

• 输入框（多行文本，类型设置为“多行文本”）

• 输入框（密码框，类型设置为“密码”）

富文本输入

• 富文本编辑

• vantui 富文本展示

数值输入

• 步进器

• 滑块

• 评分

选中输入

• 开关

• 多选框

日期时间输入

• 输入框（日期时间选择）

输入框支持日期、时间、日期时间、日历等4种类型

• 选择日期和时间：类型设置为“日期时间”
• 选择日期
  • 类型设置为“日期”，以分别滚动年、月、日的方式选择日期
  • 类型设置为“日历”，以滚动月历的方式选择日期
• 选择时间：类型设置为“时间”
• 选择年：类型设置为“日期”，“日期时间配置”的“时间类型”设置为“年”
• 选择年月：类型设置为“日期”，“日期时间配置”的“时间类型”设置为“年”和“月”
• 选择时分：类型设置为“时间”，“日期时间配置”的“时间类型”设置为“时”和“分”

以分别滚动年、月、日的方式选择日期

以滚动月历的方式选择日期

特别说明

• 存储日期时间的列，列类型选择日期时间
• 存储日期的列，列类型选择日期
• 存储部分日期时间的列，例如只存储年，列类型选择文本，如下面两幅图所示

运行效果

数据类型

输入框“日期时间配置”的“时间类型”设置为“年”，运行效果如下图所示

选择类组件

选择类组件包括：选择器、单选组、多选组、选择组等组件

• 选择器

• 单选组

• 多选组

• 选择组

通过设置“范围数据集”列出可选项，提供给用户选择。

特别注意：“范围数据集”指定的数据组件和“绑定数据列”里面的数据组件不能是同一个数据组件

• 页面运行时，选择类组件在界面上显示“范围数据集”中“选择项名称”列里面的数据，提供给用户选择
• 用户选择后，选择类组件将“范围数据集”中“选择项值”列里面的数据，写入“绑定数据列”
• 如果组件有“绑定显示列”属性，将“选择项名称”列里面的数据，写入“绑定显示列”

例如：“单位”单选组组件，界面上显示“单位字典”表中所有行“名称”列里面的值。用户选择后，将“名称”列里面的值写入到“商品”表的“单位”列中，配置如下图所示

例如：“一级分类”选择器组件，界面上显示“商品分类”表中所有行“分类名称”列里面的值。用户选择后，将“商品分类”表“主键”列里面的值写入到“商品”表的“一级分类”列中，将“分类名称”列里面的值写入到“商品”表的“商品分类.分类名称”列中，配置如下图所示

多级选择组件

上面介绍的选择类组件用于选择平板数据，对于树形数据提供树选择组件、级联选择组件、轮盘选择组件、分类选择组件。特别提供用于选择省市区的省市区组件

树选择组件

简单树组件提供树的单选和多选功能，运行效果如下图所示

• 以列表的形式展示树的一级，点“下级”进入下一级，顶部显示当前数据的路径，如上图所示
• 用户选择后，存入选择数据本身的值
• 支持逐级加载数据，适合大量数据场景

“只读”属性设置为否，简单树的最左边就会显示选择框，“多选”属性设置为“是”，用于多选，设置为“否”，用于单选。设置“选中数据集”属性，将选中的数据存储于选中数据集，设计界面如下图所示

运行效果如下图所示

级联选择组件

级联选择组件，用于多层级数据的选择，典型场景为省市区选择。运行效果如下图所示

• 已选择数据从左到右依次显示在顶部，如上图所示
• 用户选择后，存入选择数据的全路径的值，绑定数据列使用分割符，绑定显示列使用名称分割符
• 必须加载全部数据，不适合大量数据场景

vantui 组件

vantui 级联选择组件只是一个底部弹窗，弹窗内显示“范围数据集”里面的数据，用户选择后，存入“绑定数据列”。弹窗是否显示由“展示弹窗”属性值控制

• true：显示弹窗
• false：不显示弹窗

页面上需要有组件和级联选择组件配合使用

• 显示级联选择弹窗：点击页面上的组件，通过数据控制“展示弹窗”属性值为 true，显示弹窗
• 隐藏级联选择弹窗：在级联选择组件的关闭事件中，通过数据控制“展示弹窗”属性值为 false，隐藏弹窗
• 显示选择结果：在页面上显示“绑定数据列”或“绑定显示列”的值

vant 组件

vant 级联选择组件是一个选择器，通常作为弹出层的内容来使用。使用方法为

• 在单元格组件的点击事件中，显示弹出层
• 在弹出层中显示级联选择组件
• 在级联选择组件的完成事件中，关闭弹出层

具体做法如下：添加弹出层组件，位置设置为下，点击遮罩关闭设置为是

设置高度样式，本例高度为50%

在弹出层内添加级联选择组件，设置绑定数据列、范围数据集等属性，用法同选择类组件。

级联选择组件设置为不显示标题栏、完成时关闭弹出层

单元格组件设置标题、内容、箭头

箭头方向设置为下，点击时显示弹出层

轮盘选择

轮盘选择组件提供多列选项，每列选项通过纵向滚动选择，通常与弹出层组件配合使用，运行效果如下图所示

• 根据树形数据层级自动生成轮盘的选项列，如上图所示
• 用户选择后，存入选择数据的全路径的值，分割符支持定义
• 必须加载全部数据，不适合大量数据场景

在弹出层组件中放入轮盘选择组件，范围数据集选择一个树形数据组件，根据树形数据层级自动生成轮盘的选项列，点确定按钮时，将选中的数据写入绑定数据列和绑定显示列，设计界面如下图所示

在表单组件中放单元格组件，在点击事件中，显示弹出层

在轮盘选择组件的确认和取消事件中，关闭弹出层

分类选择

分类选择组件用于从一组相关联的数据集合中进行选择，支持单选或多选

分类选择组件通常放在弹出层组件中使用，将一个树形数据展示为两级分类选择，通过“绑定数据集”和“属性绑定列”设置显示的数据。用户选择的 id 存储在“绑定数据列”中，设计界面如下图所示

在弹出层中放“确定”按钮，用于将用户选择的 id 赋值到业务数据中，同时关闭弹出层，设计界面如下图所示

还可以提供“重选”功能，将分类选择组件的“绑定数据列”赋值为 "" 即可，设计界面如下图所示

省市区选择

省市区选择组件用于省市区三级联动选择，运行效果如下图所示

• 共省、市、区、街道四级，支持设置显示几级
• 用户选择后，存入选择数据的全路径的值，分割符支持定义

左侧文本属性设置标签，箭头属性设置是否显示右侧箭头图标，列数控制显示省、市、区、街道中的几级，设计界面如下图所示

表单类组件

表单类组件提供很多属性用于界面展现和用户交互，鉴于官网介绍的比较详细，本文不再赘述。

案例位置

移动-页面-列表表单组件-表单组件.w

移动-页面-列表表单组件-选择类组件.w

移动-页面-列表表单组件-富文本组件.w

移动-页面-页面交互-简单树选择.w