在常见的项目中，凡是涉及到表格展示的时候，在表格的上方必有一个筛选栏，可用于常用的筛选、搜索功能。
今天，我们利用element来封装一个属于我们的搜索栏。
1. 需求分析
- 支持下拉框和input框
- 可指定存放数据的变量
- input框和下拉框内容根据参数动态生成
- 搜索按钮返回所有数据
2. 准备工作
- 在components文件夹下新建common文件夹，用于存放公共组件
- common目录下新建SearchBar.vue
<template>
<div class="search-bar">
这是search bar的内容
</div>
</template>
<script>
export default {
name: 'SearchBar',
}
</script>
<style scoped>
</style>
- 在ElementTest.vue组件中对SearchBar进行引用，便于调试。
使用组件流程
- 引入组件
import SearchBar from './common/SearchBar.vue'; - 注册组件
在export default {}中加入
export default {
components: {
SearchBar
},
}
- 使用组件
在你想使用组件的地方加入你注册的标签
<div class="test-cont">
<SearchBar></SearchBar>
</div>
也可以写成
<search-bar></search-bar>
页面效果图
2. 实现
思路
- 通过v-for实现input和select的生成
- 通过每个item的属性来控制input和select的属性
- 通过seachData对象中的input对象和select对象来接收数据
- 通过seachData.input[item.model]方式来为input动态添加item.model属性
- 通过this.$emit()，将数据返回给父组件
common/SearchBar.vue
html
<template>
<div class="search-bar">
<div class="search-cont"
v-for="(item, index) in inputs"
:key="item.model+''+index">
<div class="title" v-if="item.title">{{item.title}}</div>
<el-input
:style="{width:item.width+'px'}"
v-model="seachData.input[item.model]"
:placeholder="item.placeholder?item.placeholder:'请输入内容'">
</el-input>
</div>
<div class="search-cont"
v-for="(item, index) in selects"
:key="item.model+''+index">
<div class="title" v-if="item.title">{{item.title}}</div>
<el-select
:style="{width:item.width+'px'}"
:filterable="item.filterable"
:clearable="typeof(item.clearable) == 'undefined'?true:item.clearable"
v-model="seachData.select[item.model]"
:placeholder="item.placeholder?item.placeholder:'请输入内容'"
@change="item.change?item.change($event):undefined"
@clear="item.clear?item.clear():undefined">
<el-option
v-for="(option, index) in item.options"
:key="option.label+''+index"
:label="option.label"
:value="option.value"
:disabled="option.disabled">
</el-option>
</el-select>
</div>
<div class="search-cont">
<el-button
:type="button.type?button.type:'primary'"
:plain="button.plain"
:round="button.round"
:circle="button.circle"
:disabled="button.disabled"
icon="el-icon-search"
@click="search">查询</el-button>
</div>
</div>
</template>
js
<script>
export default {
name: 'SearchBar',
props: {
inputs: {
default: () => {return new Array()}
},
selects: {
default: () => {return new Array()}
},
button: {
default: () => {return new Object()}
}
},
data() {
return {
seachData: {
input: {},
select: {}
}
}
},
methods: {
search(){
this.$emit('search', this.seachData)
}
}
}
</script>
css
<style scoped>
.search-bar{
display: flex;
flex-wrap: wrap;
}
.search-cont{
display: flex;
align-items: center;
margin: 5px 10px 5px 0px;
}
.search-cont:last-child{
margin-right: 0;
}
.title{
padding-right: 5px;
flex-shrink: 0;
font-weight: 900;
}
</style>
ElementTest.vue
html
<template>
<div class="test-cont">
<SearchBar :inputs="inputs" :selects="selects" @search="search"></SearchBar>
</div>
</template>
js
<script>
import SearchBar from './common/SearchBar.vue';
export default {
name: 'ElementTest',
components: {
SearchBar
},
data() {
return {
inputs: [
{
title: "姓名",
model: 'input1',
},
{
model: 'input2',
},
{
title: "姓名",
model: 'input1',
width: 100
},
{
model: 'input2',
width: 100
},
{
title: "姓名",
model: 'input1',
width: 100
},
{
model: 'input2',
width: 100
}
],
selects: [
{
title: "美食",
model: 'select1',
width: 100,
change: (val) => {
console.log(val)
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}]
},
],
}
},
methods: {
search(val){
console.log(val)
}
}
}
</script>
css
<style scoped>
</style>
