Search 标签搜索

avue-search 用字典标签组合搜索条件，可与列表或 avue-crud 配合使用。组件维护条件对象并触发 change，实际列表查询由业务回调完成。

单选、多选与自定义字段

效果预览可直接操作下方示例

multiple: false 为单选，值是一个字典值；默认多选，值为数组。示例使用本地字典，点击标签后下方显示当前条件。

正在加载示例…

<template>
  <avue-search v-model="form" :option="option" @change="handleChange">
    <template #keyword>
      <el-input v-model="form.keyword" placeholder="输入关键词" clearable />
    </template>
  </avue-search>
  <el-alert :title="`当前条件：${summary}`" type="info" :closable="false" />
</template>

<script setup>
import { ref } from 'vue'

const form = ref({ status: 'enabled', transport: ['train'], keyword: '' })
const summary = ref(JSON.stringify(form.value))
const option = {
  column: [
    { label: '状态（单选）', prop: 'status', multiple: false, dicData: [
      { label: '启用', value: 'enabled' }, { label: '停用', value: 'disabled' }
    ] },
    { label: '交通（多选）', prop: 'transport', dicData: [
      { label: '动车', value: 'train' }, { label: '飞机', value: 'plane' },
      { label: '驾车', value: 'car' }
    ] },
    { label: '自定义关键词', prop: 'keyword', multiple: false }
  ]
}
function handleChange(value) {
  summary.value = JSON.stringify(value)
}
</script>

Props

参数	说明	类型	默认值
modelValue / v-model	搜索条件，字段名与 column.prop 一致	object	{}
option	搜索配置，必须提供 column 数组	object	—

Option

参数	说明	类型
column	搜索字段数组，见下表	array
card	使用卡片样式	boolean
props	全局字典字段映射，如 { label: 'name', value: 'id' }；列配置优先	object

Column

参数	说明	类型	默认值
prop / label	条件字段名 / 标签名	string	—
span	字段所占栅格数	number	24
multiple	只有显式设为 false 才使用单选	boolean	多选
dicData	本地字典，默认项为 { label, value }	array	—
props	当前字段的字典映射	object	—
dicUrl / dicMethod / dicQuery / dicHeaders / dicFormatter	远程字典的地址、方法、参数、请求头和格式化函数，遵循通用字典配置	string / object / function	—

单选初始化为 ''，多选初始化为 []。字典值按严格相等比较，数字 1 与字符串 '1' 不会视为同一个选项。更换选项时也应清理已失效的搜索值。

Events

事件名	说明	参数
update:modelValue	同步条件对象	form
change	条件对象发生变化，包括业务侧修改数据	form

组件没有提交按钮与 submit 事件。避免在 change 中无条件重写同一份条件对象；需要远程搜索时，在业务层处理请求去重和加载状态。

Slots 与 Methods

每个 column.prop 都可以作为具名插槽，作用域参数为 { dic }，其中 dic 是该字段的已加载字典。插槽内的自定义控件应直接绑定外部搜索对象对应字段。

通过 ref.updateDic(prop, dicData) 可替换字段字典，通过 ref.dicInit() 可按当前配置重新加载字典；修改搜索条件直接更新 v-model。