Search 搜索
使用数据配置项列表快速生成一个搜索表单，配置方法和Form组件类似
58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/search.md#">基础用法
配置项list中通过type可以配置任意表单组件，不受框架约定限制
::: snippet 使用list属性设置数据源，其中的type指定组件类型，每一项都已设置为el-form-item的子组件，通过rules配置校验规则，props设置组件参数
<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>
:::
58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/search.md#">自定义组件
在使用list的同时，也支持表单项具名插槽，以满足不同的业务需求
::: snippet 在组件内部通过具名插槽的方式，替换对应内容，列表项具名插槽格式为key，返回值为model及对应配置项所有参数
<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 | el-form组件参数 | 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 | -