BasicInputSearchHelp
- 此组件有 2 个关键属性,
v-model和v-model:displayValue即用户选择数据的 value 和 label 值 - 需要注意的是,
v-model和v-model:displayValue需要配合后端一并存储到后端,用于后续页面回显使用。
基础用法
多选
使用插槽
使用校验
必填校验 可通过
Schema的required属性来设置其他校验可在
request回调中实现
事件拦截
选取数据之后修改为添加模式(默认是设置模式)
有时业务需要保留历史选取数据,在选取新数据之后不要删除之前的历史数据
通过
:pick-type="'append'"属性来设置即可需要注意的是,如果用户选取重复的数据时,组件内部会做去重操作。
删除数据的交互修改为勾选删除
有时业务需要一部分或者自行勾选数据做删除操作
通过
:delete-type="'pick'"属性来设置即可
BasicInputSearchHelp API
BasicInputSearchHelp Attributes
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| v-model: | 值 | Array | — | 是 |
| v-model:displayValue | 在回显场景时,可使用此属性来回填显示数据 | Array | — | 是 |
| value-key | 数据选取时,指定v-model返回的数据 value | String | — | 是 |
| 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 时是否自动搜索 | Boolean | true | 否 |
| append-to-body | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | Boolean | true | 否 |
| show-confirm | 是否显示选取确认按钮 | Boolean | true | 否 |
| dialog-width | dialog 的宽度 | String | '80%' | 否 |
| dialog-title | dialog 的标题 | String | '选择数据' | 否 |
| show-page | 是否显示分页器 | Boolean | true | 否 |
| selection-config | 勾选组件的选项,依赖 vxe-table 的 checkbox-config | Object | — | 否 |
| label-mode | 是否开启 label 只读模式,默认跟随全局控制 | Boolean | false | 否 |
| disabled | 是否不可用(包含了删除按钮) | Boolean | false | 否 |
| pick-type | 选取数据之后设置数据的方式set和append ,set为直接覆盖之前选取的数据,append为不删除一直添加,selection-type 为checkbox时可用 | String | set | 否 |
| delete-type | 删除数据方式all和pick ,all为直接删除所有数据,pick为弹出一个 dialog 由用户自行选取删除,selection-type 为checkbox时可用 | String | all | 否 |
BasicInputSearchHelp Events
| 名称 | 说明 | 类型 |
|---|---|---|
| submit | 操作数据选取活删除时的回调 | Function |
BasicInputSearchHelp Exposes
| 方法名 | 说明 | 类型 |
|---|
BasicInputSearchHelp Slots
| 插槽名 | 说明 |
|---|---|
| condition.[字段名] | 对应搜索表单项自定义插槽 |
| table.[字段名] | 对应表格项自定义插槽 |
| controlButtons | 对应搜索表单按钮内容 |
Setaria Business Framework