前言

Element Plus的表格组件提供了筛选功能

前端项目中，如果表格使用的是后端分页，使用表格插件及分页器插件就可以了。这种情况下，前端的表格筛选被后端的分页条件查询取代了

另一种情况：不分页，直接查询所有数据，在前端做查询、筛选、排序

第一种情况下，数据统计由后端直接返回。这里，讨论的是第二种情况

一、需求

想要实现的是在上述第二种情况下，在进行前端筛选、重新获取数据等改变表格内数据总数的操作后，获取该总数。

然而，无法从 ElTable 组件绑定的数据、公开的属性/方法中直接获知

二、解决方案

示例基于 element-plus@2.2.9, vue@3.2.37，使用 vue组合式API实现

文末有 vue3 两种代码风格的完整代码

1. 基本示例

下面是个人员表格，可筛选性别、省份

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElButton, ElTable, ElTableColumn } from "element-plus";const provinces = ["北京", "上海", "广东"];
const tableData = ref([]);
const columns = [{ label: "No", prop: "no", width: 80 },{ label: "Name", prop: "name", width: 100 },{ label: "Age", prop: "age", width: 60 },{label: "Gender",prop: "gender",width: 100,filterable: true,filters: [{ text: "male", value: "male" },{ text: "female", value: "female" },],},{label: "Province",prop: "province",width: 140,filterable: true,filters: [{ text: "北京", value: "北京" },{ text: "上海", value: "上海" },{ text: "广东", value: "广东" },],},{ label: "Tel", prop: "tel", width: 140 },
];const tableEl = ref();onMounted(() => {queryHandler();
});// 获取列表数据
function getTableData(amount = 200) {return new Promise((resolve, reject) => {resolve(Array.from({ length: amount }).map((_, idx) => ({no: "No." + (idx + 1),name: Math.floor(Math.random() * 900000 + 100000).toString(16),age: Math.ceil(Math.random() * 40 + 20),gender: Math.random() > 0.5 ? "male" : "female",province: provinces[Math.floor(Math.random() * 3)],tel: "13311112222",})));});
}
async function queryHandler() {tableEl.value?.clearFilter();const amount = Math.floor(Math.random() * 900) + 100;tableData.value = await getTableData(amount);
}function filterHandler(value, row, column) {const property = column["property"];return row[property] === value;
}
</script><template><el-table ref="tableEl" :data="tableData" max-height="500"><template v-for="col in columns" :key="col.prop"><el-table-columnv-if="col.filterable":prop="col.prop":label="col.label":width="col.width":filters="col.filters":filter-method="filterHandler"></el-table-column><el-table-columnv-else:prop="col.prop":label="col.label":width="col.width"></el-table-column></template></el-table><el-button @click="queryHandler">重新请求列表数据</el-button>
</template>

从表格绑定数据 tableData 中无法获知筛选后的表格数据总量，查阅 Element Plus 官方文档，该组件也没有提供相应接口，那就只能想办法通过某种方案间接实现了

2. 方案

方案一：直接将筛选方法作用于 tableData，手动计算筛选后的表格数据总数

这种方案需要监听表格的 filter-change 事件，然后过滤

由于 filter-change 事件返回的当前更改的筛选条件，存在多个筛选时，需存储过滤条件

总结一下：

> 给表项绑定 column-key 属性；创建存储筛选条件的对象
> 监听表格的 filter-change 事件，更新筛选条件，计算筛选后的表格数据总数
> 表格数据变更时，清空筛选条件

上述第二步，手动计算筛选如果过于复杂，也可以考虑在DOM层面上，在表格渲染完毕后，直接查询条数(<tr>)。

方案二：监听表格组件内部数据

虽然官方未提供直接的属性与方法，但表格组件内部肯定知道满足筛选条件的数据有哪些，问题在于它是否被暴露出来

通过打印表格对象，发现store中找到了相关数据，ElTable 组件内部的状态存储信息：

更完美的是，它是响应式变量，意味着可以直接监听

上例中，我们只需要中添加一个计算变量即可：

import { ref, computed, onMounted } from "vue";const tableEl = ref();
const total = computed(() => tableEl.value?.store?.states?.data?.value?.length ?? 0
);

注意：若使用的是vue选项式API实现，需等待表格组件挂载后，再添加计算变量

三、总结

第一种方案监听筛选事件，再在监听处理事件中手动筛选数据、计算总数，较为繁琐，不太建议使用

方案二依赖于 ElTable 组件内部的状态存储信息，非官网提供的属性/方法，随着版本的更替，指不定什么时候就成潜在的 “Breaking Change” 了。建议核实后锁定项目的 element-plus 的版本

若官方后续提供相应属性/方法，再替换。

四、完整代码

Demo - 基于vue选项式API

Demo - 基于vue组合式API:

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElButton, ElTable, ElTableColumn } from "element-plus";const provinces = ["北京", "上海", "广东"];
const tableData = ref([]);
const columns = [{ label: "No", prop: "no", width: 80 },{ label: "Name", prop: "name", width: 100 },{ label: "Age", prop: "age", width: 60 },{label: "Gender",prop: "gender",width: 100,filterable: true,filters: [{ text: "male", value: "male" },{ text: "female", value: "female" },],},{label: "Province",prop: "province",width: 140,filterable: true,filters: [{ text: "北京", value: "北京" },{ text: "上海", value: "上海" },{ text: "广东", value: "广东" },],},{ label: "Tel", prop: "tel", width: 140 },
];const tableEl = ref();
const total = computed(() => tableEl.value?.store?.states?.data?.value?.length ?? 0
);onMounted(() => {queryHandler();
});// 获取列表数据
function getTableData(amount = 200) {return new Promise((resolve, reject) => {resolve(Array.from({ length: amount }).map((_, idx) => ({no: "No." + (idx + 1),name: Math.floor(Math.random() * 900000 + 100000).toString(16),age: Math.ceil(Math.random() * 40 + 20),gender: Math.random() > 0.5 ? "male" : "female",province: provinces[Math.floor(Math.random() * 3)],tel: "13311112222",})));});
}
async function queryHandler() {tableEl.value?.clearFilter();const amount = Math.floor(Math.random() * 900) + 100;tableData.value = await getTableData(amount);
}function filterHandler(value, row, column) {const property = column["property"];return row[property] === value;
}
</script><template><h3>TableData length: {{ tableData.length }}</h3><h3>Total entries: {{ total }}</h3><el-table ref="tableEl" :data="tableData" max-height="500"><template v-for="col in columns" :key="col.prop"><el-table-columnv-if="col.filterable":prop="col.prop":label="col.label":width="col.width":filters="col.filters":filter-method="filterHandler"></el-table-column><el-table-columnv-else:prop="col.prop":label="col.label":width="col.width"></el-table-column></template></el-table><el-button @click="queryHandler">重新请求列表数据</el-button>
</template>

Element Plus 跟踪表格数据总数，包括查询、筛选等操作相关推荐

element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
ant 改变表格数据_学不会这几个操作，面试时千万别说自己精通数据分析
今年的招聘季好像一直都不太景气,在现有的招聘岗位当中来看,只有一人身兼超多技能,才有可能在茫茫人海中脱颖而出,其中比较有含金量的技能比如说熟练运用Excel.精通数据分析工具,殊不知可不是掌握最基本的 ...
记element + xlsx 导出表格数据重复的坑
在使用elementui做管理平台时遇到导出表格的需求,网上有很多解决方案,最多的就是使用xlsx + FileSaver 将页面上的表格转换成excel book. // 安装xlsx filesa ...
Cell插件利用xml上传表格数据于服务器的B/S操作
引言随着XML技术发展,XML技术的广泛运用,用友华表cell插件在XML上的运用也取得很大发展,用友华表cell插件可以很方便的将客户端cell报表数据以XML形式发送给服务器,服务器再接受xml ...
Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结
前言 element-plus@2.2.0 后提供虚拟化表格组件,解决表格数据过大导致的卡顿等性能问题.相对于表格组件,用法上区别还是挺大的,尤其是一些附加的功能,例如排序.筛选.自定义单元格/表头渲 ...
表格号码归属地查询的正确检测方式
工具/原料: 能上网的电脑一台. 音速表格号码归属地功能: 1 可以对表格中的归属地,运营商,进行快速的批量查询. 2 可以过滤表格当中重复的号码. 特点: 1. 查询以后的数据直观,明了. 2. ...
html统计筛选表格count,Excel中工作表数据进行计数和筛选的操作方法
execl2007作为办公软件,统计数据的功能十分强大,如何对一个工作表的数据进行计数和筛选,今天,学习啦小编就教大家在Excel中工作表数据进行计数和筛选的操作方法. Excel中工作表数据进行计数 ...
easyui数据表格显示复选框_WinCC 报警控件、在线趋势/表格控件数据查询
1．报警控件数据查询在WinCC报警记录组态时,我们可以给报警消息定义不同的类别.类型.用户文本块等(图1),有了以上的组态,我们就可以自定义过滤条件,在报警控件中查询或显示分类的报警信息. 图 1 ...

Element Plus 跟踪表格数据总数，包括查询、筛选等操作

前言