表单联动

多个表单组件间联动操作

表单结构示意图

item结构
表单结构如上图所述,表单配置分为profile配置input配置,我们考虑到了尽可能多的场景,并为之准备了不同的结构以应对需求

表单动图

  • item结构

如何使用表单组件

表单配置

  Pager({
    data: {
      motto: {  // 一个表单项
        data: [
          {
            title: '类目1',
            itemClass: 'oooo',
            input: [
              {
                type: 'text', id: 'username', title: '标题', placeholder: '动态响应下拉框的值', 
                union: {
                  id: 'ddmenu',
                  callback: function(point) {
                    switch (point.value) {
                      case '1002':
                        this.inputData.value = '湖南省吧'
                        break;
                      case '1001':
                        this.inputData.value = '广东省吧'
                        break;
                    }
                    this.save()
                  }
                }
              },
            ]
          },
          {
            title: '类目6',
            input: [
              {
                id: 'ddmenu',
                type: 'dropdown',
                title: '省份',
                placeholder: '请选择省份',
                titles: {
                  data: [
                    {title: '广东', value: '1001'},
                    {title: '湖南', value: '1002'},
                    {title: '山东', value: '1003'},
                    {title: '广西', value: '1004'},
                    {title: '山西', value: '1005'},
                  ]
                }
              }
            ]
          }
        ]
      },
    }
  })

模板

  <ui-form dataSource="{{motto}}" />

配置说明

input.union

配置该input的观察目标对象,union兑现支持两个属性, id, callback
id: 被观察者的input的id后者name callback: 当被观察者触发change方法时的响应方法

  {
    id: 'ddmenu',
    callback: function(point) {
      console.log(this)
    }
  }

callback方法支持一个参数point={id, inputData},参数内容为被观察者传递过来的数据
id为被观察者的id或者name, 上例中该id值为'ddmenu'
callback为被观察者本身的即时配置及数据,上例中我们取得来该对象的'value'属性
this对象属性、方法如下

this.id

观察者本身的id

this.address

观察者的寻址地址

this.inputData

观察者的配置及属性

this.save()

执行该方法,将触发修改观察者本身,如上例中我们修改了username的value值