Vuex与前端表单进行“组合拳”，实现大屏显示应用的交互增强

Vuex是专门为Vue.js应用开发的状态管理模式。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。下图是产品开发中非常常见的大屏显示界面示例。通过Vue提供的Vuex，上层的三个dashboard和下层的table组件共享同一个数据源，实现了数据变化后的同步响应更新。“很棒的大屏显示功能，是否支持Excel数据的导入导出，表格数据是否可以实时编辑更新？”如果你长期从事软件开发，你可能不止一次从终端客户或产品经理那里听说过。这种灵魂折磨。对于非技术人员来说，要求Excel导入/导出/显示是一个很正常也很容易实现的需求。但在现实中，这个问题往往会吓到前端开发者。使用Excel文件是一项繁重的工作。这个问题可以通过前端电子表格来简化，将电子表格嵌入到网络应用程序中。同时与其他组件交互。本博客将探讨如何使用这个现有的Vue应用程序作为基础，并使用前端电子表格对其进行增强。本文假设您已经了解HTML、CSS和JavaScript。以及Vue的基础应用。如果你用过Vuex，当然会更容易理解，如果没有，也不用担心。VueX在这个项目中的应用很简单。关于VueX，你可以在Vue.js官网了解更多信息。本文将分为以下几个部分。Vuex的原始应用程序。为应用程序添加实时编辑功能。增加Excel数据导入功能，将使用的Vue应用程序是一个简单的仪表板，其中包含几个汇总信息的仪表板和一个数据表。您可以通过下面的附件获取Vue应用项目代码，然后运行“npminstall”和“npmrunserve”启动应用。附件下载地址：https://gcdn.grapecity.com.cn...原Vue应用代码结构如下：Vuex和Vue应用都定义在main.js中。components文件夹中有几个单文件Vue组件。Vuex商店代码如下。初始状态只有一个值设置为recentSales，表示最近的销售记录：conststore=newVuex.Store({state:{recentSales}});如何生成三张统计表和一张表格？打开Dashboard.vue组件。在其中，您可以看到根据Vuex存储中的数据生成了几个计算属性：因此，recentSales的单个数据集目前可以为这个大屏幕上显示的几个仪表板和表格提供一致的数据。更新。当我们用可编辑的电子表格替换现有的电子表格进行编辑时，这个功能就会派上用场。将前端电子表格添加到你的Vue应用中我们要用前端电子表格替换这个html表格，在组件文件夹中新建一个vue文件，命名为SalesTableBySpreadjs.vue，并在其中添加一个模板：其中，gc-spread-sheets元素创建电子表格和定义数据的显示方式gc-column中的dataField属性告诉该列应显示基础数据集的哪个属性。接下来是js部分：import"@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";_//SpreadJSimports_import"@grapecity/spread-sheets-vue";从“@grapecity/spread-excelio”导入Excel；从“./TablePanel”导入TablePanel；exportdefault{components:{TablePanel},props:["tableData"],data(){return{hostClass:'spreadsheet',autoGenerateColumns:true,宽度:200,visible:true,resizable:true,priceFormatter:"$#.00"}},方法：{workbookInit:function(_spread_){this._spread=spread;}}};需要很少的代码完成。几个数据属性和方法是绑定到纯前端电子表格组件的配置选项，workbookInit方法是SpreadJS在初始化工作表时调用的回调。返回Dashboard.vue文件并添加您刚刚创建的SalesTableBySpreadjs组件。然后重新运行以显示电子表格数据：