Search 搜索
Search 搜索组件是一个使用list来配置生成的搜索表单
caa7ba030ad86973b7f846fe8539a9c3af38f066/examples/views/docs/search.md#">基础用法
配置项list中通过type可以配置任意组件，不受框架限制
:::snippet 使用list属性设置数据源，列表项中的type指定组件类型，支持通过rules配置校验规则
<template>
<eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8" :searching="searching"></eagle-search>
</template>
<script>
export default {
data() {
return {
searching: false,
searchList: [
{ type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
{ type: 'eagle-select', key: 'type', label: '类型', props: { dataSource: [{ label: '呆萌', value: '1' }, { label: '二货', value: '2' }] } },
{ type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" } },
{ type: 'el-input', key: 'number', 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' },
]
}
},
mounted() {
this.searching = true;
setTimeout(() => {
this.searching = false;
}, 3000);
},
methods: {
handleSearch(value) {
console.log(value);
},
handleReset() {
console.log('reset');
}
}
}
</script>
:::
caa7ba030ad86973b7f846fe8539a9c3af38f066/examples/views/docs/search.md#">自定义组件
在使用list的同时，也支持通过slot传入组件，以满足不同的业务需求
:::snippet 使用list属性设置数据源，列表项中的type指定组件类型，支持通过rules配置校验规则
<template>
<eagle-search :list="searchList">
<template #type="{ model }">
<eagle-select v-model="model.type" :dataSource="dataSource"></eagle-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: '就这样' },
],
dataSource: [
{ label: '选项A', value: 'A' },
{ label: '选项B', value: 'B' },
]
}
},
methods: {
handleQuery(model, action) {
if (action) {
action();
console.log(model);
}
},
}
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- value / v-model | 绑定值 | Object | - | - list | 表单项配置列表 | Array | - | []
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 | - | {}