AvueAvue
首页
  • 开发指南
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
  • DATA数据大屏
  • IOT数据组态
  • AI大模型平台
  • 购买
  • 查询
应用市场
公众号
赞助支持
  • 新用户专项优惠
  • 企业专项优惠
个人支付接口
首页
  • 开发指南
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
  • DATA数据大屏
  • IOT数据组态
  • AI大模型平台
  • 购买
  • 查询
应用市场
公众号
赞助支持
  • 新用户专项优惠
  • 企业专项优惠
个人支付接口
  • Article 文章
  • CountUp数字动画
  • Comment 评论
  • Card 卡片
  • Chat 客服聊天
  • Contextmenu 右键菜单
  • Clipboard 复制剪切板
  • DialogForm 弹窗表单
  • Draggable 拖拽
  • Export excel导出/导出
  • Flow 流程
  • ImagePreview 图片预览
  • Login 登录组件
  • License 授权书
  • Print打印
  • Screenshot 屏幕截图
  • Search 搜索
    • 普通用法
    • Events
  • Sign 电子签名
  • TextEllipsis 超出文本省略
  • Tabs 选项卡
  • Tree 树型
  • Video 摄像头
  • Verify 验证码
  • Calendar 日历

Search 搜索

Tips

常用的表格或则列表的搜索组件,可以与form和crud等其他组件组合使用

普通用法

自定义:

自定义

地区:

多选:

单层多层

交通工具:

飞机动车驾车其他

使用方法和常规用法一样option配置结构体,v-model为双向数据绑定,同时包含了一个change回调事件

<template>
  <avue-search :option="option"
               v-model="form"
               @change="handleChange">
    <template #zdy="{}">
      <el-tag>自定义</el-tag>
    </template>
  </avue-search>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({
  zt: ["370000", "620000", "610000", "110000", "410000"],
  checkbox: 0,
  jtgj: [0, 1, 2, 3, 4]
});

const option = {
  column: [{
    label: '自定义',
    prop: 'zdy'
  }, {
    label: '地区',
    prop: 'zt',
    dicUrl: 'https://api.avuejs.com/area/getProvince',
    props: {
      label: 'name',
      value: 'code'
    }
  }, {
    label: '多选',
    prop: 'checkbox',
    multiple: false,
    dicData: [{
      label: '单层',
      value: 0
    }, {
      label: '多层',
      value: 1
    }]
  }, {
    label: '交通工具',
    prop: 'jtgj',
    dicData: [{
      label: '飞机',
      value: 0
    }, {
      label: '动车',
      value: 1
    }, {
      label: '驾车',
      value: 2
    }, {
      label: '其他',
      value: 3
    }]
  }]
};

const handleChange = (form) => {
  ElMessage.success(JSON.stringify(form));
};
</script>
显示代码复制代码复制代码

Events

事件名说明参数
change当搜索的值发生改变时的回调form
Last Updated: 8/3/2024, 6:58:48 AM
Contributors: smallwei
Prev
Screenshot 屏幕截图
Next
Sign 电子签名
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档

{"zt":["370000","620000","610000","110000","410000"],"checkbox":0,"jtgj":[0,1,2,3,4],"zdy":[]}

新产品通知

----------------------------

《AI大模型平台》

----------------------------

1. 大模型平台现已全面接入 DeepSeek R1 模型。

2. 提供自研流程编排引擎,可快速部署 LLM Portal,并一键托管私有模型,快速构建问答系统、知识库、智能助手等多种 LLM 应用场景。

3.「三位一体」智能架构提供灵活的 Chat、Agent、RAG(后续开发上线免费升级) 模式,满足不同业务需求,让智能化升级触手可及。

4. 系统演示:查看演示