Select组件 jb-select
jb-select
组件是在NaiveUI
的Select
组件基础上扩展的一个组件,所以NaiveUI
中支持的属性在jb-select
中都可以使用。 jb-select
做了以下扩展:
- 支持配置
url
请求地址,自动发起请求获取选项列表。 - 结合jbolt框架,
labelField
属性值默认值设为text
,valueField
属性默认值设为value
。
Props
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
url | string | undefined | 组件加载时自动向url 发起请求。 |
示例
最简单的用法
vue
<jb-select
v-model:value="form.posts"
url="/api/admin/post/options"
></jb-select>
<jb-select
v-model:value="form.posts"
url="/api/admin/post/options"
></jb-select>
多选+过滤
vue
<jb-select
v-model:value="form.posts"
url="/api/admin/post/options"
multiple
filterable
></jb-select>
<jb-select
v-model:value="form.posts"
url="/api/admin/post/options"
multiple
filterable
></jb-select>
返回的数据不满足默认的labelField
和valueField
,可以自定义
vue
<jb-select
v-model:value="form.posts"
url="/api/admin/post/options"
labelField="name"
valueField="id"
clearable
filterable
></jb-select>
<jb-select
v-model:value="form.posts"
url="/api/admin/post/options"
labelField="name"
valueField="id"
clearable
filterable
></jb-select>