Skip to content

Select组件 jb-select

头像

头像

jb-select组件是在NaiveUISelect组件基础上扩展的一个组件,所以NaiveUI中支持的属性在jb-select中都可以使用。 jb-select做了以下扩展:

  • 支持配置url请求地址,自动发起请求获取选项列表。
  • 结合jbolt框架,labelField属性值默认值设为textvalueField属性默认值设为value

Props

名称类型默认值说明
urlstringundefined组件加载时自动向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>

返回的数据不满足默认的labelFieldvalueField,可以自定义

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>