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

---

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

今天，我们利用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进行引用，便于调试。
  使用组件流程

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

export default {
  components: {
    SearchBar
  },
}

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

<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>