【手把手撸vue项目】封装公共的搜索栏组件

---

在常见的项目中，凡是涉及到表格展示的时候，在表格的上方必有一个筛选栏，可用于常用的筛选、搜索功能。

今天，我们利用element来封装一个属于我们的搜索栏。

1. 需求分析

• 支持下拉框和input框
• 可指定存放数据的变量
• input框和下拉框内容根据参数动态生成
• 搜索按钮返回所有数据

2. 准备工作

• 在components文件夹下新建common文件夹，用于存放公共组件
• common目录下新建SearchBar.vue

• 在ElementTest.vue组件中对SearchBar进行引用，便于调试。
  使用组件流程

1. 引入组件
   import SearchBar from './common/SearchBar.vue';
2. 注册组件
   在export default {}中加入

export default {
  components: {
    SearchBar
  },
}

2. 使用组件
   在你想使用组件的地方加入你注册的标签

也可以写成

页面效果图

2. 实现

思路

• 通过v-for实现input和select的生成
• 通过每个item的属性来控制input和select的属性
• 通过seachData对象中的input对象和select对象来接收数据
• 通过seachData.input[item.model]方式来为input动态添加item.model属性
• 通过this.$emit()，将数据返回给父组件

common/SearchBar.vue

html

js

css

ElementTest.vue

html

js

css