一、组件简介

AppInput 的 combobox 类型的组件对 ant design <a-select /> (opens new window) 组件的二次封装。

二、Props 参数

属性	说明	类型	可选值	默认值
columns	配置项	object		undefined
value	输入框内容	string		undefined
typeParams	类型参数	object		{}
size	控件大小，配置项中没有 size 属性时，使用此属性	string	large、default、small	small
reseal	是否要重新封装组件	boolean		false

2.1 columns 详细配置

属性	说明	类型	可选值	默认值
xtype	AppInput的类型	string		textfield
allowClear	是否允许点击清除图标删除内容	boolean		false
clearable	与 allowClear 功能相同 (优先取allowClear)	boolean		false
placeholder	占位符，提示文字	string		undefined
defaultValue	默认值	string	预设默认值	undefined
disabled	是否禁用(优先)	boolean, function(typeParams): boolean		false
readOnly	与 disabled 功能相同 (优先取disabled)	boolean		false
size	控件大小	string	large、default、small	small
showArrow	是否显示下拉小箭头	boolean		true
mode	下拉框模式	string	multiple、default	default
maxTagCount	最多显示多少个 tag	number
maxTagTextLength	最大显示的 tag 文本长度	number
modalIntercept	是否弹窗拦截	boolean,function(item:选项数据)		false
storeConfig	联网数据配置	object,array	storeConfig详解
selCols	当前请求中的字段	string		undefined
retCols	当前表单或表格中的字段名称	string		undefined
dataResult	当前数据	array		undefined
allResult	所有数据	array		undefined
editable	是否可编辑	boolean		true
forceSelection	是否强制选择	boolean		true

提示

selCols 和 retCols 仅在 BasicForm 或 AppTable 组件中有效

storeConfig 详解

当 storeConfig 为数组时，认为是自定义选项，每个选项的详细配置如下：

属性	说明	类型	可选值	默认值
code	当前选项编码	any		undefined
name	当前选项名称	string		undefined
hidden	当前选项是否隐藏	boolean		false
disabled	是否禁用当前选项	boolean, function(typeParams): boolean		false
readOnly	与 disabled 功能相同 (优先取disabled)	boolean		false
getData	获取下拉选项数据	funcion(params:请求参数)

当 storeConfig 为对象时，认为是发请求获取数据，详细配置如下：

属性	说明	类型	可选值	默认值
findUrl	查询链接	string	allUser(/smm/smm/employee/listpage)、secclass(master/secclass/list)	undefined
code	当前选项编码	any		undefined
name	当前选项名称	string		undefined
needDefault	将第一条数据作为默认值	boolean		false

提示

若要禁用某个选项，需要在请求后的数据（dataResult）中，找到对应的选项，添加 disable 或 readOnly 属性

2.2 typeParams 说明

typeParams 译为类型参数，用来标记当前输入组件的类型，它是一个对象，可以为其传递任意属性，当值发生变化后，会将其按原样返回。

例如：

• 在表格中使用时，希望为其添加行记录 :typeParams="{ row }"
• 在表单中使用时，希望为其添加表单数据 :typeParams="{ formData }"

三、Events 事件

属性	说明	参数
valueChange	当数据改变后触发	{ columns: 列配置对象, value: 当前值, oldValue: 旧值 }
showDropDownBefore	显示下拉框之前	(back: 是否继续执行，可以是任意名称) => boolean
comboboxChangeBefore	为表单、表格暴露的事件，处理关联选值问题(别的地方应该用不到)

提示

• Events 事件中的方法均可挂载在配置项下
• 当需要重新封装组件（reseal 为 true）时，若挂载在配置项下，则无效

四、简单示例

4.1 带 url 情况

<template>
  <app-input :value.sync="comboboxOption" :columns="comboboxColumns" :style="{ width: '200px' }" />
</template>

<script>
export default {
  name: '组件应有自己的名字，首字母大写，按目录使用驼峰命名',
  data () {
    comboboxOption: undefined,
    comboboxColumns: {
      xtype: 'combobox',
      storeConfig: {
        findUrl: '/mock/app1/pagelist',
        code: 'name',
        name: 'name'
      }
      // allowClear: true,
      // placeholder: '请选择密级',
      // defaultValue: '1',
      // showArrow: false,
      // disabled: true,
      // readOnly: true,
      // valueChange: ({ value }) => {
      //   console.log(value)
      // }
    }
  }
}
</script>

4.2 不带 url 情况

<template>
  <app-input :value.sync="comboboxOption" :columns="comboboxColumns" :style="{ width: '200px' }" />
</template>

<script>
export default {
  name: '组件应有自己的名字，首字母大写，按目录使用驼峰命名',
  data () {
    comboboxOption: undefined,
    comboboxColumns: {
      xtype: 'combobox',
      storeConfig: [
        { code: '男', name: '男' },
        { code: '女', name: '女', disable: false }
      ]
      // allowClear: true,
      // placeholder: '请选择性别',
      // defaultValue: 1,
      // showArrow: false,
      // disabled: true,
      // readOnly: true,
      // valueChange: ({ value }) => {
      //   console.log(value)
      // }
    }
  }
}
</script>