批量查询选择器组件

批量查询选择器组件用于批量输入ID或名称，并从数据源中匹配出对应的值显示在选择框中。组件右侧的编辑按钮点击后会弹出批量输入框，可以批量输入ID或名称进行查询。

基础用法

<template>
  <BatchQuerySelector v-model="selectedValues" :options="optionsData" @change="handleChange" />
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      optionsData: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ]
    }
  },
  methods: {
    handleChange(val) {
      console.log('选中值变更:', val)
    }
  }
}
</script>

单选模式

设置 multiple 属性为 false 可以启用单选模式。

<template>
  <BatchQuerySelector v-model="selectedValue" :options="optionsData" :multiple="false" />
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      optionsData: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ]
    }
  }
}
</script>

自定义字段名

通过 value-key 和 label-key 属性可以自定义数据源中的字段名。

<template>
  <BatchQuerySelector v-model="selectedValues" :options="customOptionsData" value-key="code" label-key="text" />
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      customOptionsData: [
        { code: 'A001', text: '选项A' },
        { code: 'B002', text: '选项B' },
        { code: 'C003', text: '选项C' }
      ]
    }
  }
}
</script>

禁用选项

可以通过 disabled-key 属性指定判断选项是否禁用的字段名，或者通过 disabled-method 属性提供自定义的禁用判断方法。

<template>
  <div>
    <h4>使用禁用字段</h4>
    <BatchQuerySelector v-model="selectedValues" :options="optionsWithDisabled" disabled-key="isDisabled" />

    <h4>使用禁用方法</h4>
    <BatchQuerySelector v-model="selectedValues" :options="optionsData" :disabled-method="customDisabledMethod" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      optionsWithDisabled: [
        { id: 1, name: '选项1', isDisabled: false },
        { id: 2, name: '选项2', isDisabled: true }, // 此选项将被禁用
        { id: 3, name: '选项3', isDisabled: false }
      ]
    }
  },
  methods: {
    // 自定义禁用判断方法
    customDisabledMethod(option) {
      // 例如：禁用id为偶数的选项
      return option.id % 2 === 0
    }
  }
}
</script>

自定义宽度

通过 max-width 属性可以设置组件的最大宽度，默认为100%（充满容器宽度）。

<template>
  <div>
    <h4>固定宽度 (300px)</h4>
    <BatchQuerySelector v-model="selectedValues" :options="optionsData" :max-width="300" />

    <h4>百分比宽度 (50%)</h4>
    <BatchQuerySelector v-model="selectedValues" :options="optionsData" max-width="50%" />
  </div>
</template>

异步加载数据源

通过 load-options 属性可以设置异步加载数据源的方法。当组件获取焦点时，会自动调用该方法加载数据。

<template>
  <BatchQuerySelector
    v-model="selectedValues"
    :load-options="loadOptionsFromServer"
    @options-loaded="handleOptionsLoaded"
    @options-load-error="handleLoadError"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedValues: []
    }
  },
  methods: {
    // 异步加载数据源
    async loadOptionsFromServer(params) {
      // 模拟接口请求
      const response = await fetch('/api/options')
      const data = await response.json()
      return data.list // 返回数组
    },
    // 数据加载完成回调
    handleOptionsLoaded(options) {
      console.log('选项数据加载完成:', options)
    },
    // 数据加载失败回调
    handleLoadError(error) {
      console.error('选项数据加载失败:', error)
    }
  }
}
</script>

您还可以手动刷新选项数据：

// 获取组件引用
this.$refs.batchSelector.refreshOptions({ keyword: 'search' })

自定义映射函数

通过 custom-map-function 属性可以自定义批量输入后的映射逻辑。

<template>
  <BatchQuerySelector v-model="selectedValues" :options="optionsData" :custom-map-function="customMapFunction" />
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      optionsData: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ]
    }
  },
  methods: {
    // 自定义映射函数
    // inputValues: 用户输入的值数组
    // inputType: 输入类型，'id' 或 'name'
    // options: 数据源
    customMapFunction(inputValues, inputType, options) {
      // 示例：模糊匹配，只要包含输入的字符串即可匹配
      if (inputType === 'id') {
        return options.filter(item => inputValues.some(input => String(item.id).includes(input))).map(item => item.id)
      } else {
        return options.filter(item => inputValues.some(input => item.name.includes(input))).map(item => item.id)
      }
    }
  }
}
</script>

属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	Array / String / Number	—	[]
options	数据源	Array	—	[]
load-options	异步加载数据源的方法	Function	—	null
auto-load	是否自动加载数据	Boolean	—	true
value-key	值字段名	String	—	'id'
label-key	标签字段名	String	—	'name'
disabled-key	禁用字段名	String	—	'disabled'
disabled-method	自定义禁用判断方法	Function	—	null
multiple	是否多选	Boolean	—	true
collapse-tags	是否折叠标签	Boolean	—	true
placeholder	占位符	String	—	'请选择'
disabled	是否禁用	Boolean	—	false
clearable	是否可清空	Boolean	—	true
size	尺寸	String	—	'mini'
max-width	最大宽度	String / Number	—	'100%'
custom-map-function	自定义映射函数	Function	—	null

事件

事件名称	说明	回调参数
change	选中值变化时触发	当前选中值
input	选中值变化时触发	当前选中值
batch-input-complete	批量输入完成时触发	{ inputValues, matchedValues, type }
options-loaded	选项数据加载完成时触发	加载的选项数据
options-load-error	选项数据加载失败时触发	错误对象

方法

方法名	说明	参数
refreshOptions	手动刷新选项数据	(params: Object) 请求参数对象

插槽

组件暂不支持插槽。