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>