BasicInputSearchHelp

  • 此组件有 2 个关键属性,v-modelv-model:displayValue即用户选择数据的 value 和 label 值
  • 需要注意的是,v-modelv-model:displayValue需要配合后端一并存储到后端,用于后续页面回显使用。

基础用法

多选

使用插槽

使用校验

  • 必填校验 可通过Schemarequired属性来设置

  • 其他校验可在request回调中实现

事件拦截

选取数据之后修改为添加模式(默认是设置模式)

  • 有时业务需要保留历史选取数据,在选取新数据之后不要删除之前的历史数据

  • 通过:pick-type="'append'" 属性来设置即可

  • 需要注意的是,如果用户选取重复的数据时,组件内部会做去重操作。

删除数据的交互修改为勾选删除

  • 有时业务需要一部分或者自行勾选数据做删除操作

  • 通过:delete-type="'pick'" 属性来设置即可

BasicInputSearchHelp API

BasicInputSearchHelp Attributes

名称说明类型默认值必填
v-model:Array
v-model:displayValue在回显场景时,可使用此属性来回填显示数据Array
value-key数据选取时,指定v-model返回的数据 valueString
display-key数据选取时,指定输入框中显示的值String
request请求后端接口的回调Function
schema基本 Schema 项描述Object
condition-schema搜索表单项描述Object, Array
table-schema表格表单项描述Object, Array
condition-ui-schema搜索表单项 UI 相关描述Object
table-ui-schema表格项 UI 相关描述Object
before-submit提交之前的回调Function
selection-type选取数据的方式String
is-reserve多选模式下:是否保留 CheckBox 选中状态,需要配合 row-key 一起使用Boolean
row-key数据行唯一标识字段String
auto-search当打开 dialog 时是否自动搜索Booleantrue
append-to-bodyDialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 trueBooleantrue
show-confirm是否显示选取确认按钮Booleantrue
dialog-widthdialog 的宽度String'80%'
dialog-titledialog 的标题String'选择数据'
show-page是否显示分页器Booleantrue
selection-config勾选组件的选项,依赖 vxe-table 的 checkbox-configObject
label-mode是否开启 label 只读模式,默认跟随全局控制Booleanfalse
disabled是否不可用(包含了删除按钮)Booleanfalse
pick-type选取数据之后设置数据的方式setappendset为直接覆盖之前选取的数据,append为不删除一直添加,selection-type 为checkbox时可用Stringset
delete-type删除数据方式allpickall为直接删除所有数据,pick为弹出一个 dialog 由用户自行选取删除,selection-type 为checkbox时可用Stringall

BasicInputSearchHelp Events

名称说明类型
submit操作数据选取活删除时的回调Function

BasicInputSearchHelp Exposes

方法名说明类型

BasicInputSearchHelp Slots

插槽名说明
condition.[字段名]对应搜索表单项自定义插槽
table.[字段名]对应表格项自定义插槽
controlButtons对应搜索表单按钮内容