iview使用之怎樣通過render函數在tabs組件中添加標簽


  在實際項目開發中我們通常會遇到一些比較'新穎'的需求,而這時iview庫里往往沒有現成可用的組件示例,所以我們就需要自己動手翻閱IviewAPI進行自定義一些組件,也可以說是將iview庫里的多種組件進行組合使用,樓主在這段時間開發管理系統的過程中就遇到了要在Tab組件里填加Select組件,然后又要彈出一個Modal的需求,在tabs中添加Select組件着實花了我不少精力去開發,所以現在完成之后就打算記錄下來以供看到的人來進行一個參考,不足之處還望指出!

 首先,先把需求貼出來:

  

這里我們可以看到,產品在這個地方要求有一個tabs切換效果,腦洞的是居然要求把tabs的切換按鈕改造成一個Select用來實現對tabs表頭名稱的修改與刪除,當時也是一臉懵逼,后來查閱了Iview Tabs組件的相關API,發現可以通過render函數進行添加或修改,我也是在官網中的這個例子上找到了靈感。如下:

 

  不難發現,我們可以通過render函數對Tabpane的Label進行修改,於是在網上百度了一堆相關資料,很多只是對Table組件的render函數有介紹,關於修改Tabs的少之又少,好在最后還是找到了一篇相關的文章,於是對這篇文章的示例進行了修改,達到了想要結果,如下:

關於它的代碼實現,各位可以參考參考,如下圖:

這個只是一個示例的render函數的寫法,和直接在tabpane里修改它的label幾乎完全一致,可以根據自己的需求進行修改,只不過要將tabpane的label通過v-bind進行綁定,然后參考官網給的修改label標簽的render函數進行修改,至於render內部的寫法可以參考我的這個,都是一個思路,共勉!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM