如何將Element Plus無序列表項轉換樹節點

2021-01-15 IT軟體專家

工具

HBuilderXGitnpm瀏覽器技術

Vue3Element PlusJavaScript 在使用Vue3.0和Element Plus UI搭建的框架項目，使用Element Plus的Tree控制項，並將無序列表的子項轉換成Tree的根節點；點擊無序列表項，可以展開或收縮，樣式跟樹控制項一致。下面利用具體的實例說明：

操作步驟：

1、打開HBuilderX開發工具，創建Vue3和Element Plus結合的框架項目

創建Vue3和Element Plus結合的框架項目

2、在組件文件夾上，滑鼠右鍵新建vue文件，輸入文件名為TreeUl.vue，然後點擊創建

新建vue文件

3、打開vue文件，利用Element Plus頁面布局，插入一個無序列表和三個Tree控制項；Tree控制項綁定數據源，設置樹屬性

插入一個無序列表和三個Tree控制項

4、在script標籤中，data對象中，初始化樹控制項數據源和屬性，定義樹形控制項事件

data對象中，初始化樹控制項數據源和屬性

5、打開項目中的App.vue文件，導入組件TreeUl，並在界面代碼引入

導入組件TreeUl，並在界面引入

6、進入到項目根目錄，滑鼠右鍵打開Git命令窗口，輸入npm run dev啟動項目

輸入npm run dev啟動項目

7、打開瀏覽器，輸入訪問地址，結果只顯示無序列表，樹形控制項沒有顯示出來

打開瀏覽器，訪問界面，查看效果

8、返回到HBuilderX工具，將樹形控制項的lazy屬性去掉，然後保存代碼

將樹形控制項的lazy屬性去掉

9、刷新瀏覽器，樹形數據展示出來

刷新瀏覽器，樹形數據展示出來

10、打開瀏覽器控制臺，查看樹形控制項樣式；將樹形展開和收縮代碼複製到無序列表項li下，<span></span>

查看代碼，複製代碼

11、保存代碼並刷新瀏覽器，結果發現無序列表項同時出現圓點和三角圖標

保存代碼並刷新瀏覽器，查看效果

12、在style標籤中，添加樣式，設置無序列表項屬性list-style值為none

設置無序列表項屬性list-style值為none

13、設置無序列表項的屬性list-style值為none，只是去掉了圓點，點擊三角圖標不能出現展開和收縮效果。接著，給每個el-tree添加指令v-show，分別綁定一個變量

每個el-tree添加指令v-show，分別綁定

14、在data對象中，分別初始化v-show綁定的變量，值設置為false

初始化變量，設置為false

15、在每個li標籤上，綁定一個點擊事件；根據綁定變量atree、btree和ctree，修改span標籤的class屬性值

綁定點擊事件，根據變量改變class屬性

16、在methods對象中，依次定義showA、showB和showC方法，根據變量值不同而改變

根據變量值不同而改變

17、再次保存代碼並刷新瀏覽器，點擊無序列表項左側三角圖標，查看是否可以展開或收縮tree

保存代碼並刷新瀏覽器，點擊圖標

相關焦點

  • 如何在Vue3框架中使用Element Plus
    那麼，Vue3框架如何使用Element Plus？下面利用實例說明：操作步驟：1、打開電腦硬碟，新建一個文件夾aam，打開文件夾並打開Git命令窗口；輸入命令npm install -g @vue/cli
  • Vue 3下element-ui用不了怎麼辦,element-plus來幫你
    element-plus你可以理解為是element-ui支持Vue 3的版本，element-plus是一套支持Vue 3.0的組件庫，提供的組件涵蓋了絕大部分頁面UI的需求。在Vue 3的腳手架項目中，首先安裝element-plus的npm包，命令如下所示：npm install element-plus -S編輯main.js，引入整個element-plus組件和所需的樣式，由於element-plus組件內部默認使用英語，而我們項目需要使用中文
  • 官方Element Plus for Vue 3.0 Beta 版本今天發布了!
    直接來到Element Plus官網，先進行安裝：npm install element-plus --save關於快速上手可參考官網，裡面對於全局配置、按需引入以及如何與新版的vue-cli開源不易，也希望大家多多關注與支持Element 以及現在的新成員 Element Plus相關連結github：https://github.com/element-plus/element-plus
  • 如何比對不同序列同源性,畫出高顏值的進化樹?
    中糧肉食中心實驗室團隊   編輯：劉建城    審核：龍進學博士                                                  如何畫出高顏值的進化樹預備知識:在生物信息學中，進化樹被用來表示物種之間的進化關係。生物分類學家和進化論者根據各類生物間的親緣關係的遠近，把各類生物安置在有分枝的樹狀圖表上，簡明地表示生物的進化歷程和親緣關係。葉子節點之間的距離表示相應的兩個物種之間的差異程度。
  • GraPhlAn繪製的超高顏值物種樹Cladogram
    Nature Biotechnology. 2019, 37: 676-684. doi:10.1038/s41587-019-0104-4是不是很漂亮之前公眾號已經為大家介紹了GraPhlAn進化樹的繪製方法，如下文：今天就帶大家根據特徵表(OTU table)、和物種注釋(Taxonomy
  • B_樹,B+樹。誰主沉浮?(Mysql優化系列3)
    且看B-樹和B+樹決戰紫晶之巔。紅黑樹因為本身的樹高問題 , I/O多長效率不高，那麼是否有一種可以再樹每個節點存儲多個元素，就可以解決問題呢，對他就是B-樹。1、B_樹數據結構紅黑樹結構如圖：那麼每個節點存最大三個，第四產生轉換
  • 生信實操丨序列進化保守性分析和可視化
    1.PhastCons,Phylop介紹和小工具下載獲得保守性打分的第一步是對多物種的全基因組序列進行多序列比對，然後根據比對結果獲得分值。這是一個非常繁瑣的過程，好消息是UCSC基因組瀏覽器使用兩個軟體PhastCons和PhyloP把由MULTIZ產生的60個脊椎動物的多序列比對結果轉換成兩種單一的保守性計分和顯示，這兩個方法都基於已知的種系樹結構和利用一個稱作phylo-HMM的隱馬爾可夫模型種系分析方法。
  • 如何使用XGBoost模型進行時間序列預測
    XGBoost也可以被用於時間序列預測，儘管它需要將時間序列數據集先轉換成監督學習問題。它需要用到一種被稱為前進式驗證的特殊方法來評估模型，因為使用k折驗證來評估模型容易導致偏向樂觀的結果。本教程中，你將探索如何為時間序列預測開發一個XGBoost模型。
  • 理解項
    但是Prolog如何在內部查看表？實際上，它會將表視為由兩個特殊項構建而成的項，即[]代表空表，以及「. 」（句號），它是二元函數的函子，用於構建非表項。空表。項[]和「.」被稱為表構造函數。 這就是這些構造函數用於構建表的方式。不用說，定義是遞歸的：•空表是項[]。長度為0。•非空表是 .
  • 手把手教你用 Fast Tree 快速構建序列進化樹
    對於近緣序列，最大簡約法用的假設最少，各種方法結果相似。而對於遠緣序列，一般使用最大似然法或鄰接法。對相似度很低的序列，鄰接法往往出現 Long-branch attraction（LBA，長枝吸引現象），嚴重幹擾進化樹的構建。對於各種方法構建分子進化樹的準確性，Hall 認為貝葉斯的方法最好，其次是最大似然法，然後是最大簡約法。其實如果序列的相似性較高，各種方法結果差別不大。
  • 高轉換效率才是硬道理! 80Plus電源推薦
    【PConline 海選導購】一個電源如何衡量其性能如何？有的人說品牌，有的人說功率，而有的人會說轉換效率等等。小編認為最大偏離值和轉換效率這兩個數值是能夠比較直觀地評測一個電源的性能優劣。小編認為最大偏離值和轉換效率這兩個數值是能夠比較直觀地評測一個電源的性能優劣。針對轉換效率這一點，很多廠家都紛紛生產出80PLUS認證的電源產品。
  • 基於NI TestStand 的超高頻電子標籤清點功能自動化測試序列軟體的...
    以本文被測對象為例，當超高頻標籤進入射頻場之後，PXIe-5641R 將上位機指定的命令轉換為 20 MHz 帶寬的數位訊號，再通過 D/A 轉換為模擬信號發送至上變頻轉換器，上變頻轉換器將信號轉換至上位機指定的工作信號(例如：載波 922.5 MHz /發射功率 15 dBm /調製深度 90%)，並通過天線發送至標籤。
  • 二叉搜索樹的構建
    1 二叉搜索樹BST二叉搜索樹(Binary Search Tree，簡寫BST)，又稱為二叉排序樹或二叉查找樹。其定義為：對於樹中的每個節點，其左子樹的所有節點值都小於該節點的值，其右子樹的所有節點值都大於該節點的值。二叉搜索樹的任意一個子樹也是二叉搜索樹。
  • 系統進化樹軟體—MEGA介紹
    在樹中，每個節點代表其各分支的最近的共同祖先，而各個節點間的線段長度對應演化距離。 系統進化樹常用工具主要有以下幾類：1. MEGA：Masatoshi Nei和他的同事們開發和維護的分子進化遺傳學分析包的網站。2. Phylip：Joe Felsenstein在華盛頓大學創建和維護的一個軟體包——系統推理軟體包（Phylip）的網站。
  • 如何獲取蛋白序列並進行序列比對?
    很多情況下，我們為了研究一個蛋白的重要性，需要查看這個蛋白在多個物種，以及與這個蛋白家族中其它蛋白的相似性，並構建進化樹。
  • 為什麼 MongoDB 索引選擇B樹,而 Mysql 索引選擇B+樹?
    從上面我們可以看出最核心的區別主要有倆，一個是數據的保存位置：B樹保存在所有的節點中，B+樹保存在葉子節點一個是相鄰節點的指向：B樹葉子節點之間沒有指針，B+樹有這裡區別分別給B樹和B+樹帶來了什麼好處呢？其實對於資料庫來說，選用什麼數據結構無非就是為了增刪改查和存儲更加高效，因為找特點時也要從這個點去回答。
  • iPhone8plus無服務怎麼解決?
    iPhone8plus無服務怎麼解決?有時在使用iPhone8plus過程中可能會遇到無服務的情況，如果您的iPhone8plus無服務請嘗試以下解決辦法，一般是可以解決掉，下面就一起來看看具體解決方法吧!
  • 乾貨|時間序列預測類問題下的建模方案探索實踐
    時間序列的自相關性可以理解為時間序列自己與自己（不同滯後項）之間的相關性，本文使用時滯圖來觀察時間序列的自相關性，時滯圖是把時間序列的值及相同序列在時間軸上後延的值放在一起展示，如圖3所示。而圖5右側圖中，自相關圖並未圍繞坐標軸上下浮動，且其單位根檢驗統計量為-3.313199，比99%概率下的臨界統計-3.439740值大，且P-value沒有明顯接近0，不能拒絕原假設，即該序列存在單位根，判斷是非平穩序列。平穩序列可以直接開始建模，如果是非平穩的序列，可以通過差分的方式將其先轉化為平穩序列，再進行建模。
  • 進化決策樹:當機器學習從生物學中汲取靈感時
    如何根據進化算法搭建決策樹？與其它分類器相比，進化決策樹的表現如何？數據集為了說明本文中提及的概念，我將使用航空公司乘客滿意度的調查結果數據集。有關此數據集的更多信息，請參見此處。其目的是預測顧客對航空公司的服務的滿意度。這樣的研究對公司的決策至關重要。