示例

类型

Form 共有三种类型：常规（base）表单、搜索（search）表单和展示（info）表单。 每类表单都有其固定的适用场景、形态与栅格适应方式等等

编辑表单

Base 表单

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="Base 类型下的 Form">
        <form type="base" layout="horizontal">
            <item label="姓名" node="input" placeholder="请输入姓名" name="name" colspan="{{span: 2}}"></item>
            <item label="订单编号" node="input" placeholder="请输入订单编号" name="orderNo" colspan="{{span: 2}}"></item>
            <item label="手机号" node="input" placeholder="请输入手机号码" name="phoneNumber" colspan="{{span: 2}}"></item>
            <item label="订单日期" node="date-picker" placeholder="请选择创建日期" name="orderDate" colspan="{{span: 2}}"></item>
            <item label="备注信息" node="input" placeholder="请输入订单备注信息" name="note" colspan="{{span: 4}}"></item>
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

展示表单

展示表单只做信息的展示，其形态如下

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="Info 类型下的 Form">
        <form type="info" layout="horizontal">
            <item label="姓名" node="input" placeholder="请输入姓名" name="name" colspan="{{span: 2}}" value="陈国荣"></item>
            <item label="订单编号" node="input" placeholder="请输入订单编号" name="orderNo" colspan="{{span: 2}}" value="97348923"></item>
            <item label="手机号" node="input" placeholder="请输入手机号码" name="phoneNumber" colspan="{{span: 2}}" value="167284948726"></item>
            <item label="订单日期" node="date-picker" placeholder="请选择创建日期" name="orderDate" colspan="{{span: 2}}" value="2022.04.06"></item>
            <item label="备注信息" node="input" placeholder="请输入订单备注信息" name="note" colspan="{{span: 4}}" value="这里是订单的备注信息"></item>
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

提示 理论上所有的 item 都可以展示为最基本的文本样式，但是我们推荐结合 Item 本身的类型来呈现最佳的展示效果，你可以在 item 文档内，找到不同item 类型的展示形态。

搜索表单

基础

在搜索表单中，某些组件会自动改变形态。 搜索表单默认只会显示重置按钮，其它与常规表单相同。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="Search 类型下的 Form">
        <form type="search" fold-button="{{ show: true, folded: true }}" confirm-button>
            <item label="search" node="input" placeholder="search" name="search"></item>
            <item label="label" node="select" data="{[{label: 'label', value: 1 }]}"></item>
            <item label="label" node="select" data="{[{label: 'label', value: 1 }]}"></item>
            <item label="label" node="select" data="{[{label: 'label', value: 1 }]}"></item>
            <item label="label" node="select" data="{[{label: 'label', value: 1 }]}"></item>
            <item label="label" node="select" data="{[{label: 'label', value: 1 }]}"></item>
            <item label="label" node="select" data="{[{label: 'label', value: 1 }]}"></item>
            <item label="label" node="select" data="{[{label: 'label', value: 1 }]}"></item>
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

自定义筛选条件

通过自定义面板，设置搜索表单内展示/隐藏部分查询条件

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="Search 类型下的 Form">
        <form type="search" fold-button="{{ show: true, folded: true }}" confirm-button>
            <item label="search" node="input" placeholder="search" name="search"></item>
            <item label="Row Label" node="select" data="{[{label: 'label', value: 1 }]}"></item>
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

筛选条件保存

用户可通过此设置保存常用筛选条件，方便下次调用。

触发查询配置

你可以设置

查询栏折叠

通过 fold-button.folded 配置，设置查询栏是否折叠

移动端两行模式

在移动端可通过配置筛选条件，设置查询条件外露两行展示。 阐述具体如何配置：

布局

Form 具有水平和垂直两种布局形态，

水平布局

在水平布局下，item 的标签和输入控件将会按照水平上下排列，在水平模式下标签文本将会有更多的展示空间，

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="水平布局">
        <form type="base" layout="horizontal">
            <item label="姓名" node="input" colspan="{{span:3}}" name="name" placeholder="请输入姓名"></item>
            <item label="订单编号" node="input" colspan="{{span:3}}" name="orderNo" placeholder="请输入订单编号"></item>
            <item label="订单日期" node="date-picker" colspan="{{span:6}}" name="createDate" placeholder="请输入创建日期"></item>
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

垂直布局

在垂直布局下，item 的标签和输入控件将会按照垂直左右排列，

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="垂直布局">
        <form type="base" layout="vertical" confirmButton="{{false}}" clearButton="{{false}}">
            <item label="姓名" node="input" name="name" placeholder="请输入姓名"></item>
            <item label="订单编号" node="input" name="orderNo" placeholder="请输入订单编号"></item>
            <item label="订单日期" node="date-picker" name="createDate" placeholder="请输入创建日期"></item>
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

函数式接口

为简化复杂表单的操作，我们提供了一系列函数式接口，比如 getData 和 setData

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="垂直布局">
        <actions>
            <button text="获取（getData）" bind-click="getData" />
            <button text="设置（setData）" bind-click="setData" />
            <button text="清除（clear）" bind-click="clear" />
            <button text="校验（validate）" bind-click="validate" />
            <button text="重置（reset）" bind-click="reset" />
            <button text="提交（confirm）" bind-click="confirm" />
        </actions> 
        <form x="form" type="base" layout="vertical" confirmButton="{{false}}" clearButton="{{false}}">
            <item label="姓名" node="input" name="name" placeholder="请输入姓名" required></item>
            <item label="订单编号" node="input" name="orderNo" placeholder="请输入订单编号"></item>
            <item label="订单日期" node="date-picker" name="createDate" placeholder="请输入创建日期"></item>
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {},
    getData() {
        const formData = this.getComponent('form').getData();
        console.info(formData);
    },
    setData() {
        this.getComponent('form').setData({
            name: '张三',
            createDate: Date.now()
        });
    },
    clear() {
        this.getComponent('form').clear();
    },
    validate() {
        this.getComponent('form').validate((error, formData) => {
            if (error) {
                console.info('error', error);
                return;
            }

            console.info('formData', formData);
        });
    },
    reset() {
        this.getComponent('form').reset();
    },
    confirm() {
        this.getComponent('form').confirm();
    },

});

item-col 常量

你可以在 form 上通过 item-col 整体设置 item 的宽度

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="item-col 常量">
        <actions>
            <button text="常量6" bind-click="setItemCol(6)" />
            <button text="常量5" bind-click="setItemCol(5)" />
            <button text="常量4" bind-click="setItemCol(4)" />
            <button text="常量3" bind-click="setItemCol(3)" />
            <button text="常量2" bind-click="setItemCol(2)" />
            <button text="常量1" bind-click="setItemCol(1)" />
        </actions> 
        <form type="base" :itemCol="itemCol" :key="itemCol" confirmButton="{{false}}" clearButton="{{false}}">
            <item label="姓名" node="input" name="name" placeholder="请输入姓名" required></item>
            <item label="订单编号" node="input" name="orderNo" placeholder="请输入订单编号"></item>
            <item label="订单日期" node="date-picker" name="createDate" placeholder="请输入创建日期"></item>
        </form>
    </module>
</page>

export default XPage({
    data: {
        itemCol: 3
    },
    show() {},
    setItemCol(col) {
        this.setData({itemCol: col});
    },

});

Attributes

参数	说明	类型	可选值	默认值
name	名称	String	--	--
type	类型	String	base/search/info	base
item-col	表单项栅格设置	Number/Object	1-6(内置6种响应式常量)/{span: Number}	--

item-col

常量	说明
1	{xl:1,lg:1.5,md:2,sm:3,xs:6}
2	{xl:2,lg:3,md:4,sm:6,xs:6}
3	{xl:3,lg:3,md:4,sm:6,xs:6}
4	{xl:4,lg:4.5,md:4,sm:6,xs:6}
5	{xl:5,lg:4.5,md:6,sm:6,xs:6}
6	{xl:6,lg:6,md:6,sm:6,xs:6}

Attributes - Base

参数	说明	类型	可选值	默认值	端	版本
clearButton	清除按钮的配置	Boolean/String/Object	--	--	PC/Mobile	--
clearButton.show	是否展示按钮	Boolean	--	--	PC/Mobile	--
clearButton.text	按钮文本	String	--	--	PC/Mobile	--
confirmButton	确定按钮的配置	Boolean/String/Object	--	--	PC/Mobile	--
confirmButton.show	是否展示按钮	Boolean	--	--	PC/Mobile	--
confirmButton.text	按钮文本	String	--	--	PC/Mobile	--
layout	布局形态	String	vertical/horizontal	vertical	PC/Mobile	--
locked	锁定状态	Boolean	--	false	PC/Mobile	--
validateByItems	支持嵌套item分开校验	Boolean	--	false	PC/Mobile	--

Attributes - Search

参数	说明	类型	可选值	默认值	端	版本
clearButton	清除按钮的配置	Boolean/String/Object	--	--	PC/Mobile	--
clearButton.show	是否展示按钮	Boolean	--	--	PC/Mobile	--
confirmButton	确定按钮的配置	Boolean/String/Object	--	--	PC/Mobile	--
confirmButton.show	是否展示按钮	Boolean	--	--	PC/Mobile	--
save-search-condition	是否支持保存搜索条件	Boolean	true/false	false	PC/Mobile	--
search-conditions	搜索条件列表	Array	--	[]	PC/Mobile	--
fold-button	折叠按钮的配置	Boolean/String/Object	--	--	PC/Mobile	--
fold-button.show	是否显示折叠按钮	Boolean	--	--	PC/Mobile	--
fold-button.folded	是否折叠	Boolean	--	--	PC/Mobile	--
settable	自定义仅search可用	Boolean/Object	--	false	PC/Mobile	--
settable.persist	是否本地存储	Boolean	--	true	PC/Mobile	--
settable.initialItems	表单项初始初始值	Array<{name: String, visible: Boolean}>	--	true	PC/Mobile	--
twoLinesSearch	是否两行查询展示	Boolean	--	false	PC/Mobile	--
groupSearch	twoLinesSearch时，radio/checkbox是否分组展示，独占一行	Boolean	--	true	PC/Mobile	--
noEmpty	为真时调用getData时的返回值会过滤 undefined /null/''	Boolean	--	true	PC	--

Attributes - Info

参数	说明	类型	可选值	默认值
label-size	定义label的宽度	String/Number	可以是 s(72px)/ m(120px默认)/ l(192px) /指定数字	120
null-placeholder	item空值占位符	String	--	--

Events

名称	说明	回调参数
cleared	清除（包括错误提示）触发	()
confirm	确定触发	({name, value})
items-changed	所有的item上的changed	( [{ name, value, oldValue, extra }], formData)

Events - Base

名称	说明	回调参数
validated	表单合法性改变后触发	(isFormValid)

Events - Search

名称	说明	回调参数
save-condition	保存查询条件时触发	查询条件信息
select-condition	选择查询条件时触发	查询条件信息

Methods - API

名称	说明	入参	返回	端	版本
getData	获取数据	--	--	PC/Mobile	--
setData	设置数据	data	--	PC/Mobile	--
clear	清除数据	--	--	PC/Mobile	--
reset	重置数据	--	--	PC/Mobile	--
confirm	触发确定	--	--	PC/Mobile	--
validate	校验表单	Function(error, formData)	--	PC/Mobile	--
getItemNode	获取item	itemName	vue component实例	PC/Mobile	--
getFormId	获取form唯一标识	--	formId	PC	--
showFilter	展示筛选弹窗	--	--	Mobile	--