因為在項目中經常開發一些報表，并且業務、邏輯其實都有大部分的重復部分。

所以將這些常用的模塊抽象出來、并且可視化操作。封裝成一款報表開發工具。

先看一下項目的一些效果：數據單項綁定

?可視化操作：

數據聯動：

使用技術：vue全家桶

項目結構：

│ App.vue? ?#主要組件
│ main.js
│
├─assets
│ logo.png
│
├─axios? #網絡，用于執行遠程計算機上的sql，或者接口、實現數據繪制到頁面上
│ http.js
│
├─components
│ │ Canvas.vue #基礎畫布組件
│ │ ComSougnBaseAssemblyCheckbox.vue??#基礎組件
│ │ ComSougnBaseAssemblyDatePicker.vue?#基礎組件
│ │ ComSougnBaseAssemblyDateTimePicker.vue?#基礎組件
│ │ ComSougnBaseAssemblyFont.vue?#基礎組件
│ │ ComSougnBaseAssemblyInputText.vue?#基礎組件
│ │ ComSougnBaseAssemblyLine.vue?#基礎組件
│ │ ComSougnBaseAssemblyRadio.vue?#基礎組件
│ │ ComSougnBaseAssemblySelect.vue?#基礎組件
│ │ ComSougnBaseAssemblySlider.vue?#基礎組件
│ │ ComSougnBaseAssemblySwitch.vue?#基礎組件
│ │ ComSougnBaseAssemblyTimePicker.vue?#基礎組件
│ │ ComSougnBaseAssemblyTimeSelect.vue?#基礎組件
│ │ ComSougnBaseBi.vue?#可視化操作主要實現的組件，使用遍歷，繪制所有組件
│ │ ComSougnBaseLayoutCenter.vue?#基礎布局組件
│ │ ComSougnBaseLayoutRow.vue?#基礎布局組件
│ │ Config.vue?#基礎組件
│ │
│ └─mixins? #無用
│ GetValue.js?
│
├─router
│ index.js #無用
│
└─store?#無用
│ index.js
│
└─stage
canvas.js?#畫布，保存所有組件的布局，以及樣式、配置選項
data.js #數據，保存數據源
type.js #組件可以配置的樣式

實現算法：

樹的廣度優先遍歷，依據畫布中保存的組件布局，來重繪所需要的組件。并尋找依據的配置選項和數據源實現聯動

聯動實現：

vuex，每次修改配置，以及數據源時。對整個vuex中的數據強制更新指針。實現聯動。

github：bug？？

https://github.com/ututuut/bi.git

轉載于:https://www.cnblogs.com/ututuut/p/9508638.html

總結

以上是生活随笔為你收集整理的VUE报表开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。