公共浮动组件

背景

现在系统中的公共浮动组件都是列表一次性返回所有的数据，对性能有很大的损耗，所以把部分字段在组件浮动显示的时候通过请求接口的方式异步加载进来，后端只返回列表上显示的基础字段即可

实现思路

因为浮动的时候是列表一行的数据，所以请求完接口把对应的字段添加到该行的数据节点下即可触发视图更新

具体实现方式

1. 整体处理在element-ui中的<el-popover>组件的@show事件中，以下图handleProductInfoShow为例

2. 在handleProductInfoShow中即可请求异步获取数据接口，为避免每次划过浮窗都会请求接口，所以要做缓存，如果列表中后端有直接返回是否缓存字段就是用后端返回的字段，如果后端没有返回就需要前端自行添加字段，以下图商品浮动为例：isRequest为前端自行添加用来判断是否缓存的字段，该字段需要卸载pruduct节点下，请求成功之后需要把isRequest设为true，请求前需要判断isRequest是不是为true，只有不为true才请求接口。

注意事项

1. 请求完接口赋值的时候需要使用this.$set防止嵌套过深不处罚视图更新
2. 在重新加载列表数据如：(切换分页，筛选项筛选，操作之后重新加载列表等)会清楚缓存

有待完善

1. 列表中如果有多条相同的商品，需不需要只请求其中一个做缓存，其他不需要请求，如果只请求一次需要考虑怎么清楚缓存。
2. 防止误触
3. 抽离封装代码的方案

结语

PS:如果有更好的方案，欢迎找@甘蔗