因?yàn)樵陧?xiàng)目中經(jīng)常開(kāi)發(fā)一些報(bào)表，并且業(yè)務(wù)、邏輯其實(shí)都有大部分的重復(fù)部分。

所以將這些常用的模塊抽象出來(lái)、并且可視化操作。封裝成一款報(bào)表開(kāi)發(fā)工具。

先看一下項(xiàng)目的一些效果：數(shù)據(jù)單項(xiàng)綁定

?可視化操作：

數(shù)據(jù)聯(lián)動(dòng)：

使用技術(shù)：vue全家桶

項(xiàng)目結(jié)構(gòu)：

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

實(shí)現(xiàn)算法：

樹(shù)的廣度優(yōu)先遍歷，依據(jù)畫(huà)布中保存的組件布局，來(lái)重繪所需要的組件。并尋找依據(jù)的配置選項(xiàng)和數(shù)據(jù)源實(shí)現(xiàn)聯(lián)動(dòng)

聯(lián)動(dòng)實(shí)現(xiàn)：

vuex，每次修改配置，以及數(shù)據(jù)源時(shí)。對(duì)整個(gè)vuex中的數(shù)據(jù)強(qiáng)制更新指針。實(shí)現(xiàn)聯(lián)動(dòng)。

github：bug？？

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

轉(zhuǎn)載于:https://www.cnblogs.com/ututuut/p/9508638.html

總結(jié)

以上是生活随笔為你收集整理的VUE报表开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。