支持 Vue2/Vue3 版本 无差别使用

安装

npm i @blueking/search-select

使用

• vue3框架下使用

<template>
  <SearchSelect
    v-model="value"
    :data="data"
    unique-select
    placeholder="请选择或输入"
    :value-split-code="'+'"
  />
</template>
<script setup>
  import { ref, shallowRef } from 'vue';
  import SearchSelect from '@blueking/search-select'
  const data = shallowRef([
    {
      name: '实例状态',
      id: '1',
      multiple: true,
      placeholder: '必须项',
      async: true,
      validate: true,
      showLogicalPanel: true,
      children: [
        {
          name: '创建中',
          id: '1-2',
        },
        {
          name: '运行中',
          id: '1-3',
          disabled: false,
        },
        {
          name: '已关机',
          id: '1-4',
        },
        {
          name: '王者荣耀',
          id: '2-1',
          disabled: false,
        },
        {
          name: '刺激战场',
          id: '2-2',
        },
        {
          name: '绝地求生',
          id: '2-3',
        },
      ],
    },
    {
      name: '实例业务',
      id: '2',
      onlyRecommendChildren: true,
      children: [
        {
          name: '王者荣耀',
          id: '2-1',
          disabled: false,
        },
        {
          name: '刺激战场',
          id: '2-2',
        },
        {
          name: '绝地求生',
          id: '2-3',
        },
      ],
    },
    {
      name: 'IP地址',
      id: '3',
      disabled: true,
    },
    {
      name: 'testestset',
      id: '4',
    },
  ]);
  const value = ref([
    {
      id: '2',
      name: '实例业务',
      values: [{
        name: '王者荣耀',
        id: '2-1',
      }],
    },
  ]);
</script>

• vue2框架下使用

<template>
  <SearchSelect
    :value="value"
    :data="data"
    unique-select
    placeholder="请选择或输入"
    :value-split-code="'+'"
  />
</template>
<script setup>
  import { ref, shallowRef } from 'vue';
  import SearchSelect from '@blueking/search-select/vue2'
  import '@blueking/search-select/vue2/style.css'
  const data = shallowRef([
    {
      name: '实例状态',
      id: '1',
      multiple: true,
      placeholder: '必须项',
      async: true,
      validate: true,
      showLogicalPanel: true,
      children: [
        {
          name: '创建中',
          id: '1-2',
        },
        {
          name: '运行中',
          id: '1-3',
          disabled: false,
        },
        {
          name: '已关机',
          id: '1-4',
        },
        {
          name: '王者荣耀',
          id: '2-1',
          disabled: false,
        },
        {
          name: '刺激战场',
          id: '2-2',
        },
        {
          name: '绝地求生',
          id: '2-3',
        },
      ],
    },
    {
      name: '实例业务',
      id: '2',
      onlyRecommendChildren: true,
      children: [
        {
          name: '王者荣耀',
          id: '2-1',
          disabled: false,
        },
        {
          name: '刺激战场',
          id: '2-2',
        },
        {
          name: '绝地求生',
          id: '2-3',
        },
      ],
    },
    {
      name: 'IP地址',
      id: '3',
      disabled: true,
    },
    {
      name: 'testestset',
      id: '4',
    },
  ]);
  const value = ref([
    {
      id: '2',
      name: '实例业务',
      values: [{
        name: '王者荣耀',
        id: '2-1',
      }],
    },
  ]);
</script>

属性列表

| 名称 | 说明 | 类型 | 可选值 | 默认值 | | --------------------- | ------------------------------------------------------------------ | -------- | --------------- | ----------------------------------------------------- | | data | 搜索选择数据 | Array | | -- | | model-value / v-model | 已选择的数据项 | Array | | -- | | max-height | 最大高度 | Number | | 120 | | conditions | 条件选择列表 | Array | | [{ id: 'or', name: '或' }, { id: 'and', name: '且' }] | | clearable | 是否可以清空 | Boolean | | true | | get-menu-list | 自定义动态获取选择项列表方法 | Function | | -- | | validate-values | 自定义动态验证选择或者输入值 如果返回 校验失败的文本则代表校验失败 | Function | | -- | | uniqueSelect | 是否过滤掉已选择项 | Boolean | | false | | value-behavior | 配置纯文本是否可以生成value (all: 可以，need-key: 需要key值) | String | allneed-key | all | | placeholder | placeholder | String | | 请选择 |

事件

| 名称 | 说明 | 参数 | | ----------------- | -------------------------- | -------------------- | | update:modelValue | 选择项发生变化时触发 | [{id, name, values}] | | search | 点击右侧search Icon 时触发 | event |

data字段

| 名称 | 类型 | 说明 | 默认值 | | --------------------- | ------------- | -------------------------------------------------------------- | ------ | | id | String | 搜索选择数据选项唯一key值（必须是全局唯一） | -- | | name | String | 展示字段 | -- | | children | {id, name}[] | 子列表 | -- | | multiple | Boolean | 是否可多选 默认不可多选 | -- | | async | Boolean | 是否远程获取子列表 需配合组件属性 getMenuList使用 (默认是true) | -- | | noValidate | Boolean | 是否校验 需配合组件属性 validateValues使用 | -- | | placeholder | String | placeholder | -- | | disabled | Boolean | 是否禁用 | -- | | onlyRecommendChildren | Boolean | 添加推荐选项字符时 是否只匹配children数据 | false | | logical | SearchLogical | 多选值时,值与值之间的逻辑符号 ("或者"&) | | -- | | showLogicalPanel | Boolean | 是否显示逻辑符号选项列表 默认不显示 仅在多选时生效 | false |