el-table自定义筛选实现

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

在el-table的使用过程，发现el-table中的筛选方式只有一种，就是利用filters属性传入可选数据，然后列出选项供用户选择。
显然，这并不能满足大部分表格筛选的需求，于是只能扩展一下其他筛选方式。

确定筛选渲染位置

el-table-column中有一个header的插槽，利用这个插槽，可以将自定义的筛选组件插入到表头之中，需要注意的是，使用这个插槽之后，label属性会失效，需要在插槽中写上表头名称：

 <el-table-column label="Col Name">
   <template #header>
     <!-- 表头名称 -->
     <span> Col Name </span>
     <!-- 自定义筛选组件 -->
     <FilterInput />
 </template>

其中FilterInput是个人自定义的筛选组件，里面封装了自定义的筛选方式。header插槽中会传入两个参数{ column, $index }，不过在项目中没有用到，也就不展示。

创建自定义筛选组件

一般来说，表头的筛选步骤都是先在表头放一个筛选图标，当鼠标悬浮于图片时，显示筛选框，然后选择或者输入内容。
要实现鼠标悬浮时显示筛选框这个功能，可以借助element-ui中的el-popover组件，在这个组件中直接设定以图标为reference，即可轻松实现:

<el-popover
    placement="bottom"
    width="300"
    trigger="hover"
    popper-class="filter-table-input"
  >
    <i slot="reference" class="el-icon-search table-filter-icon" />
    <section class="table-filter-btns">
       <!-- content -->
    </section>
  </el-popover>

基本上就可以实现鼠标悬浮显示输入框的功能:

然后就是添加需要的input、选项或者选择器，在底部在加上确认和重置按钮，至此，就基本实现了整体的布局，示例代码如下:

<el-popover
    placement="bottom"
    width="300"
    trigger="hover"
    popper-class="filter-table-input"
  >
    <i slot="reference" class="el-icon-search table-filter-icon" />
    <!-- content -->
    <section class="table-filter-btns">
      <!-- 输入框 -->
      <el-input v-model="searchKey" placeholder="Key Word !" size="mini" class="filte-input" @keydown.native.enter="handleConfirm" />
      <!-- 摆放按钮 -->
      <section class="btns">
        <el-button plain size="mini" @click="handleClear">
          Clear
        </el-button>
        <el-button type="primary" size="mini" @click="handleConfirm">
          Confirm
        </el-button>
      </section>
    </section>
  </el-popover>

效果：

事件处理

最后就是处理筛选和重置两个按钮的事件，利用$emit通知父组件筛选条件发生了更改，并将相应的参数传入:

this.$emit('filterChange', this.searchKey)

然后在父组件中监听这个事件，接收筛选组件返回的筛选条件，用对应函数来实现筛选处理即可：

 <el-table-column label="Col Name">
   <template #header>
     <!-- 表头名称 -->
     <span> Col Name </span>
     <!-- 自定义筛选组件 -->
     <!-- @filterChange为监听事件，$event代表组件返回的参数，即筛选条件 -->
     <FilterInput @filterChange="handleFilterChange($event, 'productName')" />
 </template>