下拉框

新增additional配置,配置附带的按钮。支持配置动态添加下拉框选项按钮,具体配置见下方。

新增异步获取数据方式 见最下方yml配置说明 2018-03-12

效果预览

结构配置

- model: select
  name: admin
  label: 管理员
  append_data: true
  value: '{%user.admin%}'
  placeholder: 请选择管理员
  readonly: false
  multiple: false #是否多选
  validate:
    required: required
    msg: 请选择正确的管理员
  options:
    - {value: 1,content: nikoniu}
    - {value: 2,content: erikqin}
  additional: 
    - model: btn
      content: 添加选项
      type: dialog
      dialog_id: add_select_dialog
      class_name: 'btn-sm btn-info'

字段说明

字段 类型 含义 默认值
model String 该控件类型为select -
name String 控件名 -
label String 控件label名称 -
value String 下拉框的值 -
placeholder String 占位提示 -
readonly Boolean 是否只读,true为只读 flase
append_data Boolean 是否同时传递选择项名称 flase
validate Object 校验规则,配置参考输入框-validate -
options Array 下拉框的选项 -
help String 帮助提示,放于表单项后方 -
under_help String 帮助提示,放于表单项下方 -
additional Array 附加组件配置 -
multiple Boolean 是否多选,true为多选 false

options字段说明

字段 类型 含义 默认值
value String 下拉框选项值 -
content String 下拉框选项展示名称 -

配置动态添加下拉框选项实例

如果要配置动态添加下拉框,首先需要通过additional配置下拉框后方按钮,同时也需要配置弹窗进行数据填入

1、additional配置

additional: 
  - model: btn
    content: 添加选项
    type: dialog
    dialog_id: add_select_dialog
    class_name: 'btn-sm btn-info'

2、preloader配置,主要是按钮配置需要加入not_refresh,trigger_name,其中trigger_name值为'select.addOption'

preloader:
  add_select_dialog:
    model: dialog
    title: 添加下拉项
    body:
      form:
        action: '/api/dialog/save_select' #示例接口
        content:
          - model: input
            label: 下拉项名称
            type: text
            name: act_name
            placeholder: 请输入下拉项名称
          - model: input
            label: 下拉项值
            type: text
            name: act_name
            placeholder: 请输入下拉项值
    buttons:
      - model: button
        not_refresh: true #需要
        trigger_name: 'select.addOption' #需要
        class_name: btn-info
        content: 提交
        type: submit

3、接口'/api/dialog/save_select'返回值json格式示例。其中content和value为固定返回格式,分别代表名称和值。

{
    "ret": 0,
    "msg": "OK",
    "errorcode": 0,
    "data": {
        "content": "动态添加",
        "value": "100876"
    }
}

异步获取选项的结构配置

- model: select
  name: admin
  label: 管理员
  append_data: true
  value: '{%user.admin%}'
  placeholder: 请选择管理员
  request_id: get_select_options #请求的id名称,去wau_request里面配置
  options: []

request_id配置方式(类似preloader弹窗的配置方式)

具体wau_request见wau_request讲解

wau_request:
  get_select_options:
    model: ajax
    url: '/wau/api/get_select_opitons'
    method: 'POST'
    params: {qq: '{%user.qq%}'}

ajax接口返回格式如下:

{
  "ret": "0",
  "data": {
    "options": [
      {
        "content": "异步1",
        "value": "1"
      },
      {
        "content": "异步2",
        "value": "2"
      }
    ]
  },
  "msg": "ok"
}

results matching ""

    No results matching ""