spfm-market-front/src/components/el-search.vue

<!-- @2022 -6-13 @dalaoyang -->
<!-- 搜索栏组件，后期可加判断 -->
<!-- 支持input select 按钮显示-->


<template>
  <div class="flex-count">
    <div class="flex-container">
      <template v-if="list.elinput">
        <div
          class="flex-title"
          v-for="item in list.elinput"
          :key="'input'+item.key"
        >
          <div>{{ item.name }}</div>:
          <el-input
            v-model="seachList[item.key]"
            :placeholder="item.name"
            :style="{ width: item.width ? item.width + 'px' : '400px' }"
            class="filter-item"
            clearable
          />
        </div>
      </template>
      <template v-if="list.date">
        <div
          class="flex-title"
         
          v-for="(item, index) in list.date"
          :key="'input'+index"
        >
          <div>{{ item.name }}</div>:
          <div >
            <el-date-picker
              :key="'date'+index"
             v-model="seachList[item.key]"
              type="daterange"
            :style="{ width: item.width ? item.width + '%' : '400px' }"
              
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-if="list.elselect">
        <div
          class="flex-title"
          v-for="(item, index) in list.elselect"
          :key="'select'+index"
        >
          {{ item.name }}:
        </div>
        <el-select
          v-for="item in list.elselect"
          :key="'select'+item.key"
          v-model="seachList[item.key]"
          :placeholder="item.name"
          clearable
          :style="{ width: item.width ? item.width + 'px' : '90px' }"
          class="filter-item"
        >
          <el-option
            v-for="i in item.option"
            :key="i.key"
            :label="i.value"
            :value="i.value"
          />
        </el-select>
      </template>
    </div>
    <div class="btn">
      <el-button
        v-if="list.sreach"
        class="filter-item"
        type="primary"
        @click="handleSearch"
      >
        搜索
      </el-button>
      <el-button
        v-if="list.reset"
        class="filter-item"
        type="warning"
        @click="handleRest"
      >
        重置
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      seachList: {},
    };
  },
  methods: {
    //搜索事件
    handleSearch() {
      this.$emit("seachList", this.seachList);
    },
    //重置事件
    handleRest() {},
  },
};
</script>

<style  lang="scss" scoped>
.flex-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-container {
  display: -webkit-box;
}
.flex-title {
  height: 40px;
  line-height: 40px;
  margin-left: 40px;
  margin-right: 15px;
  display: flex;
}
.filter-item {
  width: 9rem;
}
</style>