简介
为了方便表格查询时可以筛选列的值，需要给列增加筛选框（多选框），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的值重置为[]，然后依然请求后台就可以了。