当前位置：首页> 目前在用VUE做一个网页，上面有个实时数据变化展示，如何才能做到不页面刷新使页面数据变化？> 正文

目前在用VUE做一个网页，上面有个实时数据变化展示，如何才能做到不页面刷新使页面数据变化？

用户2533839871.5
2023-07-13
46
共3人回复

「葡萄城GrapeCity 」发表看法

2023-07-19

题主描述的这个问题，其实在前端表格领域是最常见的需求之一。这里简单罗列几点表格组件中最常用的功能：

怎样让表格样式丰富多变的同时，又能实现数据驱动？怎样给单元格中优雅地嵌入诸如checkbox、button、autocomplete、超链接，甚至图片、图表、二维码、富文本等前端常见的元素？怎样高效地实现排序、筛选、分组、树、数据校验，甚至数据汇总等能力？

以上是不是还能命中几个题目没提到的潜在需求呢？

要设计表格组件，这些问题都不得不考虑，下面我以目前市场上比较成熟的表格组件SpreadJS为例，谈一谈部分需求的设计思路。SpreadJS是纯前端的表格控件，本身的实现不依赖任何插件、框架或后端库，比较能说明问题：

怎样让表格样式丰富多变的同时，又能实现数据驱动？

SpreadJS采用了数据与视图分离、并与数据源绑定的设计。跟样式相关的内容保存在单元格属性中，与数据源(JSON)分离开，通过数据绑定关系保存数据和单元格位置的映射。渲染引擎再根据这些信息，实现数据展示、交互的能力：

表格模板与数据源双向绑定

可以实际操作一下SpreadJS的表格绑定功能。

通过这样的设计，数据驱动所需的元素就都有了，接下来实现渲染内容随数据源变更、新数据追加推送、条件改变、公式计算等因素联动都已不是难题。

怎样给单元格中优雅地嵌入诸如checkbox、button、autocomplete、超链接，甚至图片、图表、二维码、富文本等前端常见的元素？

SpreadJS是采用Canvas渲染的表格区域，当需要修改单元格内容时，会响应操作事件，创建一个input元素在单元格上，填写后执行回填，将数据返回数据源。渲染层把基础功能进行了封装，并暴露了原型接口。

这样的设计为扩展和丰富输入形式提供了可能。比如我们可以定义，当双击单元格时，不弹出input，而是弹出Autocomplete组件，我们要做的只是重写“弹出input”的方法即可。如图：

SpreadJS AutoComplete

模态窗同理：

SpreadJS 模态窗

参考示例：SpreadJS自定义单元格 —— 模态窗

怎样高效地实现排序、筛选、分组、树、数据校验，甚至数据汇总等能力

实际上有了以上两个案例的支撑，不难理解在这几个需求中，基本上都是对数据源本身的操作。主要不断地实现同一个接口（JavaScript里通过继承或重写prototype），可以优雅高效地实现。

相关资料：

SpreadJS 官方主页SpreadJS 产品文档在线 Excel 编辑器

「Mason2098 」发表看法

2023-07-20

使用Vue可以很方便地实现不刷新页面而更新数据展示。我来给你提供几个解决方案：

使用Vue的数据绑定功能：Vue中数据是通过数据绑定来实现的。通过数据绑定，Vue可以自动更新数据并更新DOM元素视图，不需要手动刷新页面。你可以通过Vue的指令（如v-bind、v-model）和计算属性来实现数据的动态更新。使用Vue的组件化功能：Vue的组件化从本质上来说也是一种数据绑定，因为每个组件都是一个独立的实例，数据的更新只会影响到当前组件，不会对其他组件产生影响。所以，你可以通过将实时数据变化展示封装成一个组件来实现数据的实时更新。使用Vue的Watch功能：Vue提供了一个Watch功能，可以用来监听数据的变化。你可以在Watch函数中编写相关的处理逻辑，当数据变化时自动触发处理逻辑，从而实现实时数据的展示。

这些方法在Vue中都是非常常用的，并且非常适合实时数据变化的展示。