vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

时间:2022-01-24 01:12:14

流量监控项目需求:

根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图

1.表格需要多选

2.要联动图表,所以关键是要利用表格多选的触发回调函数

vue table中使用多选:

很简单,只需要在table中增开一项,type定义为selection即可:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

如何默认列表全选呢?

先关联table:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

数据加载完成以后,获取列表数据长度,手动循环切换状态(toggleRowSelection是关键,通过这个方法来触发echarts的刷新):

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

OK,现在可以实现默认全选状态了:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

如何与echarts图表联系起来呢?

我使用的图有两个,饼图和折线图,先说饼图,饼图需要的是数据项名称和数据,即name和value,方法是我们ajax请求成功后,对数据进行循环,获取到所需的name和value值,具体方法不赘述了,需要了解echarts的安装、使用、配置的,可以前往echarts官网查看文档,也可以翻看我上一篇关于echarts的博文,里面记录了关于图表的使用和配置,数据的规则,如何刷新视图,以及踩过的坑,这里就不重复说明了,直接上代码:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

实现的效果为:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

项目中,折线图的需求是,显示十条折线,横坐标为当前月往前推五个月,也就是近半年的数据,纵坐标为每月的点击量,OK,添加折线图,通过多选框的监听回调事件toggleRowSelection来获取已选择的项,通过循环拿出每一项的ID,当然这个ID是你自己数据的ID,然后通过接口将含有ID列表的数组发往服务器,返回数据中包含多个月,以及每个月的点击量,这样就实现了每次点击都会刷新折线图,这里有个需要注意的,就是现在默认是全选,当我打印出已选项的时候回发现,每次刷新页面都是选择整个表格从1-10的数据,也就是说会触发10次监听事件,而我们只需要最后全选状态下的最后一次,所以这里我加了个判断,默认firstTime为true,当我请求的数据总数和已选择的数据总数相同,并且是第一次进入时,才生成折线图,这样就把10次ajax请求缩减为了1次:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

生成折线图:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

OK,现在可以把折线图,以及多选数据联动实现了:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

vue中使用table多选,翻页后已选项如何保存呢?

使用row-key属性获取已选项的ID,当然这个ID也是你自己数据的ID,比如我下面红框中的toanID,然后建立一个空数组保存已选项的ID,就OK了:

table中:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

data中:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

methods中:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

根据周数更新视图,跟月数一样,对数据的一些处理我已经在其他博文中写道,有兴趣的可以千万查看:

https://www.cnblogs.com/wangqiao170/p/9294448.html

又有一个问题,如果页面大小改变了怎么办呢?

一般我们的想法都是用window.onresize监听窗口事件,确实需要这样做,但是这个事件只能生效一次,也就是说,我们的饼图和折线图是分开在两个方法里实现的,要调用两次window.onresize,第二次不会生效,这里可以将监听事件封装成函数,将饼图和折线图的对象保存起来,然后通过函数调用的形式在一次监听两个事件:

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

定义空对象

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

封装修改图表大小的函数

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

第一次进入的时候调用这个函数就OK了!

希望本文对你有所帮助!