Element-UI：el-table 表头筛选

前言

需求：根据表头筛选表格符合条件的数据
最终实现效果：

情况一：表格没有分页

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() // 获取后端数据的接口
}

总结：

以上是两种情况，情况一：纯前端筛选；情况二：适用于配合后端接口做分页筛选。

Element-UI：el-table 表头筛选相关推荐

Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图解决方法: Step1:在app.vue中加入css样式 <st ...

Element-UI：el-table 表头筛选

前言

情况一：表格没有分页

html 部分：

js 部分：

情况二：表格有分页，需要筛选所有数据中符合条件数据，配合接口数据渲染

html 部分：

js 部分：

总结：

Element-UI：el-table 表头筛选相关推荐

最新文章

热门文章