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