# Search 搜索

使用数据配置项列表快速生成一个搜索表单，配置方法和**Form**组件类似

## 基础用法

配置项list中通过type可以配置任意表单组件，不受框架约定限制

::: snippet 使用`list`属性设置数据源，其中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则，`props`设置组件参数

```html
<template>
  <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8"></eagle-search>
</template>

<script>
export default {
  data() {
    return {
      searchList: [
        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
        { type: 'el-input-number', key: 'type', label: '类型' },
        { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" } },
        { type: 'el-input', key: 'address', label: '地址' },
        { type: 'el-input', key: 'not', label: '我不是', visible: (model) => `${model.type}` === '2' },
        { type: 'el-input', key: 'no', label: '我没有', visible: (model) => `${model.type}` === '2' },
        { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => `${model.type}` === '2' },
      ]
    }
  },
  methods: {
    handleSearch(value) {
      console.log(value);
    },
    handleReset() {
      console.log('reset');
    }
  }
}
</script>
```

:::

## 自定义组件

在使用`list`的同时，也支持**表单项具名插槽**，以满足不同的业务需求

::: snippet 在组件内部通过具名插槽的方式，替换对应内容，列表项具名插槽格式为`key`，返回值为model及对应配置项所有参数

```html
<template>
  <eagle-search :list="searchList" :span="8">
    <template #type="{ model }">
      <el-select v-model="model.type">
        <el-option value="A">选项A</el-option>
        <el-option value="B">选项B</el-option>
      </el-select>
    </template>
    <template #button-group="{ model, collapse, doSearch, doReset, doCollapse }">
      <el-button size="mini" type="primary" round @click="handleQuery(model, doSearch)">搜索</el-button>
      <el-button size="mini" type="success" round @click="doReset">恢复</el-button>
      <el-button size="mini" type="info" round @click="doCollapse">{{ collapse ? '打开' : '关闭' }}</el-button>
    </template>
  </eagle-search>
</template>

<script>
export default {
  data() {
    return {
      searchList: [
        { type: 'el-input', key: 'name', label: '名称' },
        { key: 'type', label: '类型' },
        { type: 'el-input', key: 'yes', label: '是的' },
        { type: 'el-input', key: 'yeah', label: '没错' },
        { type: 'el-input', key: 'absolutely', label: '就这样' },
      ],
    }
  },
  methods: {
    handleQuery(model, action) {
      if (action) {
        action();
        console.log(model);
      }
    },
  }
}
</script>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
value / v-model |	绑定值 | Object | - | -
list | 表单项配置列表 | Array | - | []
formProps | <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> | Object | - | {}
span | 表单项占位 | Number | 0 - 24 | 6
searching | 查询按钮加载状态 | Boolean | true/false | false

## Methods 方法

方法名|说明|参数
-|-|-
setModelValue | 设置表单值 | model

## Events 事件

事件名称|说明|回调参数
-|-|-
change | 表单model发生变化时触发 | model对象
search | 点击查询按钮时触发 | model对象
reset | 点击重置按钮时触发 | -

## List 表单项配置列表

参数|说明|类型|可选值|默认值
-|-|-|-|-
type | 组件类型 | String | - | el-input
key | 参数名 | String | - | -
label | 参数标签 | String | - | -
props | 组件参数 | Object,Function(model: object)) | - | {}
style | 组件样式 | Object | - | { width: "100%" }
on | 组件事件 | Object,Function(model: object) | - | {}
visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
rules | 组件校验规则 | Object,Array | - | -
tip | 组件提示框 | Object,String | - | {}
span | 表单项占位 | Number | 0 - 24 | -