前言
需求:根据表头筛选表格符合条件的数据
最终实现效果:
情况一:表格没有分页
html 部分:
在列中设置 filters 和 filter-method 属性即可开启该列的筛选。
filters 是一个数组,filter-method 是一个方法,它用于决定某些数据是否显示, 会传入三个参数:value, row 和 column。
<el-table-columnprop="UploadStatus"label="上传逻辑"width="100"fixed="left":filters="[{ text: '修改', value: 1 },{ text: '新增', value: 2 },]":filter-method="filterHandler"><template slot-scope="scope"><span class="importTabSpan">{{scope.row.UploadStatus == 1 ? '修改' : '新增' }}</span></template></el-table-column>
js 部分:
filterHandler(value, row, column) {const property = column['property']return row[property] === value}
情况二:表格有分页,需要筛选所有数据中符合条件数据,配合接口数据渲染
filter-method 是数据过滤的方法,但是只支持已有数据的筛选,不支持后台筛选。 通过查找和翻阅,我们可以利用 filter-change 事件来实现。
filter-change 会返回一个参数,key:column 的 columnKey,可以用Object.keys()获取key值,然后判断是哪一列进行了筛选操作(多列筛选时用到),value:就是筛选的条件。
html 部分:
在列中设置 filters 属性即可开启该列的筛选。filters 是一个数组。
column-key 属性官网解释如图:
@filter-change 事件官网解释如图:
<el-table:header-cell-style="headerClass":data="importTabData.members"v-loading="importTabLoading"element-loading-text="加载中..."element-loading-background="rgba(255, 255, 255, 0.75)"stripeborder@filter-change="handlerImportTabFilter"><el-table-columnprop="fidata_syncy_type"label="上传逻辑"width="100"fixed="left":filters="[{ text: '修改', value: 1 },{ text: '新增', value: 2 },{ text: '删除', value: 3 }]":column-key="columnKey[0]"><template #default="scope"><span class="importTabSpan yellow" v-if="scope.row.fidata_syncy_type == 1">修改</span><span class="importTabSpan blue" v-if="scope.row.fidata_syncy_type == 2">新增</span><span class="importTabSpan red" v-if="scope.row.fidata_syncy_type == 3">删除</span></template></el-table-column><el-table-columnprop="fidata_status"label="上传状态"width="100"fixed="left":filters="[{ text: '上传成功', value: 0 },{ text: '提交成功', value: 1 },{ text: '提交失败', value: 2 },{ text: '导入验证失败', value: 3 }]":column-key="columnKey[1]"><template #default="scope"><span class="importTabSpan green" v-if="scope.row.fidata_status == 0">上传成功</span><span class="importTabSpan blue" v-if="scope.row.fidata_status == 1">提交成功</span><span class="importTabSpan red" v-if="scope.row.fidata_status == 2">提交失败</span><span class="importTabSpan red" v-if="scope.row.fidata_status == 3">导入验证失败</span></template></el-table-column></el-table>
js 部分:
数据定义:
columnKey: ['uploadSyncType', 'uploadStatus'], // 表头筛选,各列的标识uploadSyncType: [], // 表格上传逻辑uploadStatus: [] // 表格上传状态
const handlerImportTabFilter = (val: any) => {for (const key in val) {if (key == 'uploadSyncType') {// 选好条件,点击筛选即可配合后端进行数据筛选state.uploadSyncType = val[key]} else if (key == 'uploadStatus') {// 选好条件,点击筛选即可配合后端进行数据筛选state.uploadStatus = val[key]}}state.importCurrentPage = 1getImportTabData() // 获取后端数据的接口}
总结:
以上是两种情况,情况一:纯前端筛选;情况二:适用于配合后端接口做分页筛选。