vue searcher based on element-ui.

example.vue

  <template>
  <div>
    <m-searcher :kw="kw" :fields="searchFields" :placeholders="placeholders" @search="loadData">
      <el-select v-model="kw.moldsId" clearable size="small" @clear="loadData" class="search-box__input">
        <el-option :key="index" v-for="(o, index) in molds"
          :label="o.code" :value="o.id"/>
      </el-select>
    </m-searcher>
  </div>
  </template>
  
  <script>
  ...
  </script>

searcher.vue

<template>
  <div class="search-box">
    <slot></slot>
    <el-input v-for="(item, index) in fields" :key="index"
      :placeholder="placeholders[item]" size="small" icon="close"
      v-model="kw[item]" @keyup.13.native="search"
      class="search-box__input" :on-icon-click="() => { kw[item]=''; search()}"></el-input>

    <div class="search-box__button-wrap">
      <el-button type="info" size="small" @click="search" class="search-box__button" icon="search">查询</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    kw: { type: Object, required: true },
    fields: { type: Array, required: true },
    placeholders: { type: Object, required: true }
  },
  methods: {
    search() {
      this.$emit('search')
    }
  }
}
</script>