vue 搜索组件

搜索组件

一、效果图

二、组件代码

<template>
  <div
    class="search-title"
    :class="isOpen?'open-search':''"
  >
    <div
      id="searchModelContent"
      ref="searchModelContent"
      class="searchModel-content"
    >
      <template v-for="(model, index) in searchMap">
        <span
          v-if="(index+1)<=searchItem && !model.hidden"
          :key="index"
          class="searchModel-group"
        >
          <span v-if="model.label">{
  { model.label }}</span>
          <template v-if="model.type === 'input'">
            <!-- 输入框 -->
            <el-input
              v-model.trim="model.value"
              :placeholder="model.placeholder"
              clearable
              @clear="inputClear(model)"
            />
          </template>
          <template v-else-if="dateArray.includes(model.type)">
            <!-- 日期选择器 -->
            <el-date-picker
              v-model="model.value"
              :type="model.type"
              align="center"
              unlink-panels
              :picker-options="pickerOptions"
              range-separator="至"
              :start-placeholder="model.placeholder.start||'开始日期'"
              :end-placeholder="model.placeholder.end||'结束日期'"
              @change="timeChange(model.value, index)"
            />
          </template>
          <template v-else-if="model.type === 'radio'">
            <!-- 单选框组 -->
            <el-radio-group v-model="model.value">
              <el-radio
                v-for="radio in model.group"
                :key="radio.id"
                :label="radio.value"
              >{
  { radio.label }}</el-radio>
            </el-radio-group>
          </template>
          <template v-else-if="model.type==='riskLevel'">
            <el-select
              v-model="model.value"
              :placeholder="model.placeholder"
              :class="'select-id-' + model.value || model.selectClass"
              @change="selectChange(model,index)"