一、组件简介

AppInput 的 dropdownbox 类型的组件是对 vxe-table <vxe-pulldown> (opens new window) 和 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
storeConfig	联网数据配置	object,array	storeConfig详解
selCols	当前请求中的字段	string		undefined
retCols	当前表单或表格中的字段名称	string		undefined
dataResult	当前数据	array		undefined
allResult	所有数据	array		undefined
displayField	下拉框中显示的字段(相当于name)	string		undefined
valueField	下拉框选择后的值（相当于code）	string		undefined
intercept	是否拦截值变化	boolean、function({row})		false
editable	是否可编辑	boolean		true
forceSelection	是否强制选择	boolean		true

提示

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

storeConfig 详解

属性	说明	类型	可选值	默认值
findUrl	查询链接	string	allUser(/smm/smm/employee/listpage)、secclass(master/secclass/list)	undefined
columns	下拉表格列配置	array
width	下拉表格宽	number
height	下拉表格高	number
getData	获取表格数据	funcion(params:请求参数)
needDefault	将第一条数据作为默认值	boolean		false

提示

AppTable 中的相关配置理论上讲均支持

2.2 typeParams 说明

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

例如：

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

三、Events 事件

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

提示

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

四、简单示例

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

<script>
export default {
  name: '组件应有自己的名字，首字母大写，按目录使用驼峰命名',
  data () {
    dropdownbox: undefined,
    dropdownboxColumns: {
      xtype: 'dropdownbox',
      storeConfig: {
        findUrl: '/mock/app1/pagelist',
        columns: [
          { field: 'name', title: '姓名' },
          { field: 'address', title: '地址' }
        ]
      },
      displayField: 'name',
      valueField: 'address'
      // placeholder: '请选择部门名称',
      // valueChange: ({ value }) => {
      //   console.log(value)
      // }
    }
  }
}
</script>