简介

为了方便表格查询时可以筛选列的值，需要给列增加筛选框（多选框），element-plus提供了列的filter字段，但是基于表格数据的筛选，不会重新请求后台，而且当前表格数据有多少个条目，就会执行filter method多少遍，如果符合要求的条目就会展示出来，基于它自带的filter想去改造为请求后台就很复杂，性能很差（因为我只需要请求一次后台）。

因此，我需要自己写一个组件，给表格的列增加一个下拉按钮，是一个多选框可以筛选列的值，然后自己去根据每次的筛选请求一次后台数据。

实际效果如下：

话不多说，直接上code。

vue组件代码

这里手动给列增加了一个下拉框，鼠标移动上去会自动展开，然后是个多选框，绑定了值，点击筛选按钮会去执行新的查询，点击重置会清空这一列的filter信息。

// statusFilter是status列的筛选信息，默认都不选
statusFilter: []

      <el-table-column prop="status" label="Status" width="145px">
        <template v-slot:header="{ column }">
            {{ column.label }}
          <el-popover placement="bottom" trigger="hover">
            <el-checkbox-group v-model="statusFilter">
              <el-checkbox style="display:block;" label="READY" value="READY" size="small" />
              <el-checkbox style="display:block;" label="UNHEALTHY" value="UNHEALTHY" size="small" />
              <el-checkbox style="display:block;" label="INITIALIZING" value="INITIALIZING" size="small" />
              <el-checkbox style="display:block;" label="CHECKING" value="CHECKING" size="small" />
            </el-checkbox-group>
            <div style="margin-top: 5px">
              <el-button size="small" @click="handleRefresh">筛选</el-button>
              <el-button size="small" @click="handleRefreshResetStatus">重置</el-button>
            </div>
            <template #reference>
              <el-icon class="clickable-pointer">
                <ArrowDownBold />
              </el-icon>
            </template>
          </el-popover>
        </template>
      </el-table-column>

至于refresh table的方法就是简单的刷新表格，重新请求后台，只需要每次请求后台时，把filter参数的信息带上去查询后台就可以了，后台需要支持filter字段。

重置的话，把filter的值重置为[]，然后依然请求后台就可以了。