Vue-TreeSelect和echart聯(lián)動
因為自身基礎薄弱導致自己在學習過程中有很多不懂的地方，非常容易陷入一種自卑的境地，自己什么都不懂。本人也將會每一周寫幾篇博客來記錄自己的學習過程和遇到的很多困難。
在學習Treeselect中一開始甚至連什么是Events都不知道，所以學習起來也是非常痛苦，在引用組件和使用某一封裝組件功能中請務必看完這個組件的Events和props
這個是vue-treeselect的
業(yè)務需求
我要實現(xiàn)的是通過select選擇標簽進行選取并將相關數(shù)據(jù)傳輸?shù)絜chart的餅圖當中，所以我先進行的是構建select，我一開始使用的是element-ui中的select標簽并結合了el-input進行聯(lián)動搜索，后面發(fā)現(xiàn)了一個小小的bug而且不會解決
當標簽中進行搜索但是option中沒有數(shù)據(jù)時出現(xiàn)了無數(shù)據(jù)并且把我的搜索框覆蓋，導致只能通過頁面刷新重置這個頁面才能有搜索框出現(xiàn)，最后還是他人跟我講看看其中的API看看它自帶的方法，其實el-select自帶搜索方法只要加一個filterable即可，當這個搜索業(yè)務實現(xiàn)以后還要用樹形的結構展示也就是還要再其中內嵌一個Tree，也是到此我發(fā)現(xiàn)了Treeselect，相當于我自己寫了一遍這個組件??浪費了太多時間
TreeSelect @select
這是一個非常強大的組件，可以實現(xiàn)樹形搜索，多項選取，異步搜索等等，其中有太多的API真的很難講完，所以這次也就只講我用到的方法@select
select(node, instanceId)選擇一個選項后發(fā)出。
這個是官方所給的解釋，意思是當你選擇一個option時他就會觸發(fā)這個方法
下面是使用這個組件后的效果，里面的數(shù)據(jù)需要大家去填寫，但是要具備其中的幾個基本特性，請大家閱覽官方文檔
這是我寫的組件
<treeselect
? ? ? ? ? ? ? ? ? ?v-model="value"
? ? ? ? ? ? ? ? ? ?class="elSelectWidth"
? ? ? ? ? ? ? ? ? ?style="width: 10%"
? ? ? ? ? ? ? ? ? ?placeholder="請輸入標簽"
? ? ? ? ? ? ? ? ? ?:multiple="false"
? ? ? ? ? ? ? ? ? ?:options="optionsMetaAll"
? ? ? ? ? ? ? ? ? ?@select="findValue"
? ? ? ? ? ? ? ? ?/>
這個是方法內容
data() {
? ?return{
? ? ? ?temp: {},
? ?}
}
findValue(node) {
? ? ?this.temp = node
? ?}
我們要把父組件中的節(jié)點值取出來放進子組件中，當我們點擊選擇option時我們的findValue就會把node這個Object賦值給temp這個臨時的變量，我們來看看node的結構
將我們原本設置再option中的內容全部提取出來了，然后我們的任務就是把這個temp全部傳給子組件
<div class="deviceListHomepageBoxEchartsBox">
? ? ? ? ? ? ? ? ?<div class="deviceListHomepageBoxEchartsPieBox">
? ? ? ? ? ? ? ? ? ?<div class="deviceListHomepageBoxEchartsBox">
? ? ? ? ? ? ? ? ? ? ?<online :options="optionsMetaAll" :obj="temp" />
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
當然我們需要在這里進行注冊后才能調用這個component,我們將這個Object聲明為obj并帶著temp的值進到子組件中
第一步我們要初始化obj不然子組件不知道它是什么東西，就像對暗號一樣
props: {
? ?obj: {
? ? ?type: Object,
? ? ?default: () => {
? ? ? ?return Object
? ? ?}
? ?}
?},
聲明為一個object體然后我們就能在子組件中調用這個了
我們將obj中的值使用到我們的echart圖表中的數(shù)據(jù)中
data: [
? ? ? ? ? ?// 每個模塊的名字和值
? ? ? ? ? ?{ name: '離線', value: this.obj.value1 },
? ? ? ? ? ?{ name: '在線', value: this.obj.value2 }
? ? ? ? ?],
使用this關鍵字調用
這個時候問題就出現(xiàn)了，當我在父組件改變數(shù)值，子組件同時也改變的時候，echart沒有辦法重新渲染這個值，也是因為這個我最后弄了兩天才搞懂，其實也非常簡單，只需要使用watch進行數(shù)據(jù)監(jiān)聽，然后當數(shù)據(jù)改變時我們重新渲染就行
watch: {
? ?obj() {
? ? ?this.getPie()
? ?}
?},
非常簡單的一行代碼就完成了相關數(shù)據(jù)的監(jiān)聽了
然后展示一下相關的聯(lián)動效果吧
