<script setup>
import ViewSearch from './search.vue'
 
</script>

# 查询
<ClientOnly>
  <ViewSearch/>
</ClientOnly>

## 基础用法
- **列表导出** 和 **自定义列表** 的功能 配置详见[综合查询](/components/integrated-query/index.md)
- **列表导出** 相关hook相关参数详见[usePageDownload](/hooks/usePageDownload.html)

## 介绍
### KsSearch 组合查询
- `searchOptions`: 必须。数组，查询的条件。 key，必须 是当前查询的key值，label 必须 是展示的搜索name，placeholder 可选，当前输入的提示信息。
- `onSearch`: 必须。查询的函数。
- `noRetrieval`: 可选。传入这个参数后多条搜索无检索项，且只支持当前值的搜索。
- `hasRefresh`: 可选。Boolean,是否有刷新按钮
- `hasDown`: 可选。Boolean,是否有下载按钮
- `onExport`: 可选。Function,导出函数
- `columnDatas`: 可选。Array，自定义列表传入的数据
- `changeColumns`: 可选。Function, 自定义列表传入的数据
- `_reset`: 内置的重置查询组件方法，父组件中调用 ref.value._reset() 即可重置查询组件。

### KsInput 单个查询
- `onTransValue`: 必须。Function, 查询的函数。

## 基础用法


## 完整代码如下：

<div class="options-api" style="font-size:14px;">

```vue
<template>
  <div class='app-zoey-demo'>
     <Card title="多个查询">
        <ks-search
          :searchOptions ='searchOptions'
          @onSearch='onSearch'
          hasDown
          hasRefresh
          @onExport="downloadFn"
        >
          我是左侧内容
        </ks-search>
      </Card>
   <Card title="多个查询-可重置">
    <ks-search
     :searchOptions ='searchOptions'
      @onSearch='onSearch'
      hasDown
      hasRefresh
      @onExport="downloadFn"
      ref='mySearch1'
    >
       <Button type='primary' @click='onReset("1")'> 重置搜索条件 </Button>   
    </ks-search>
    </Card>
    <Card title="单个查询">
    <ks-search
     :searchOptions ='searchOptions2'
      @onSearch='onSearch'
      hasDown
      hasRefresh
      @onExport="downloadFn"
    >
      <Button type='primary' > 左侧内容 </Button>   
    </ks-search>
    </Card>
<Card title="单个查询-可重置">
    <ks-search
     :searchOptions ='searchOptions2'
      @onSearch='onSearch'
      hasDown
      hasRefresh
      @onExport="downloadFn"
      ref='mySearch2'
    >
      <Button type='primary' @click='onReset("2")'> 重置搜索条件 </Button>   
    </ks-search>
    </Card>
    <Card title="单条带清除逻辑的搜索">
      <KsInput @onTransValue='ongetValue' placeholder="请输入名称"/>
    </Card>
  </div>
</template>
<script setup>
// import { KsSearch,KsInput } from '@ksconsole/components'
// import { Input,Button,Icon,Message,Card } from "@king-design/vue";
import { ref,reactive } from "vue";
const mySearch1 = ref(null)
const mySearch2 = ref(null)
// 搜索条件
const searchOptions = [
    {
        key: 'name',
        label: '实例名称',
        placeholder: '我是自定义的搜索条件',
    },
    {
        key: 'id',
        label: '实例ID',
    },
]

// 搜索条件2
const searchOptions2 = [
    {
        key: 'name2',
        label: '实例名称',
    },
]
const onSearch = (v) => {
    console.log("🚀 ~ onSearch ~ v:", v)
    Message.info({content: JSON.stringify(v)})
}
const downloadFn = (v) => {
  console.log("🚀 ~ downloadFn ~ v:", v)
   Message.info({content: v})
  
}
const ongetValue = (v) => {
  console.log("🚀 ~ ongetValue ~ v:", v)
   Message.info({content: v})
  
}
const onReset = (type) => {
  type === '1' ? mySearch1.value._reset() : mySearch2.value._reset()
}


</script>



<style scoped>
.app-zoey-demo {
  padding: 24px;
  
}
</style>
```
</div>
