基于element PLUS 封装搜索组件

后台系统常用表格展示，表格基本都有查询区域，产品有时一句话就让人哑口无言：把所有表格的查询区域都改造一下。 让人忍不住，"不听不听，王八念经"。

但问题还是要解决的，为了规避一页一页改造的问题，封装一个搜索组件就显得尤为必要。

只需要传配置进去，统一处理展示。

常用的就是：① 输入框 ② 下拉框 ③ 时间选择器 ④ 级联选择。

一般就是两种方式，一是组件注册的方式，<component :is="componentName" />这样每个组件能单独开个文件进行维护；其次是都写在同一个文件中用if、else判断，下面代码举例：

<el-input
  v-if="item.type === 'input'"
  v-model="search[item.key]"
  :placeholder="item.placeholder || '请输入'"
  :maxlength="item.length || '99'"
  @clear="inputChange(item.key, search[item.key], true, 'input')"
  clearable
/>

<el-select
  v-else-if="item.type === 'select'"
  :disabled="item.disabled"
  v-model="search[item.key]"
  :style="item.style"
  clearable
  :multiple="item.multiple"
  :filterable="item.filterable || true"
  :placeholder="item.placeholder || '请选择'"
  @change="inputChange(item.key, search[item.key], true)"
>
  <el-option
    v-for="(option, index2) in item.options ||
    options[item.key] ||
    []"
    :key="item.key + index2"
    :label="option[item.name] || option.desc"
    :value="option[item.id] || option.code"
  />
</el-select>

两种方式都各有好处，第一种可以分开处理每个组件的传参、方法调用；第二个方式可以在同一个文件里统一处理。 萝卜青菜，各取所需就好。 这样封装组件的好处就是，形成体系后，查询区域配置一下就出来了，要统一改样式也方便。