前言
需求:根据表头筛选表格符合条件的数据
最终实现效果:
情况一:表格没有分页
html 部分:
在列中设置 filters 和 filter-method 属性即可开启该列的筛选。
filters 是一个数组,filter-method 是一个方法,它用于决定某些数据是否显示, 会传入三个参数:value, row 和 column。
<el-table-column
prop="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)"
stripe
border
@filter-change="handlerImportTabFilter"
>
<el-table-column
prop="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-column
prop="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 = 1
getImportTabData() // 获取后端数据的接口
}
总结:
以上是两种情况,情况一:纯前端筛选;情况二:适用于配合后端接口做分页筛选。