個人技術總結——使用element ui組件庫的前端開發


技術概述

這個技術是做什么的?

  • Element UI一套為開發者、設計師和產品經理准備的基於Vue 2.0的桌面端組件庫

學習該技術的原因

  • 在項目beta沖刺階段開發管理員前端需要

技術的難點在哪里

  • 組件分類以及元素屬性繁多復雜,並且相關資料較少,有時候遇到問題要花很多時間解決

技術詳述

你是如何實現和使用該技術的

  • 通覽一遍官網,了解該工具的大致信息

1

  • 通過教程學習基本的安裝、環境搭建以及各組件的使用

2

3

  • 學習教程視頻中的實戰訓練

4

  • 自己動手開發

5

問題和解決

  • 當使用表格組件且表頭的內容過長時,過多的字顯得非常不美觀
  • 解決方法:為相應的表頭元素加入show-overflow-tooltip屬性,並且一定要規定width屬性的大小,過長的內容就會被隱藏顯示為省略號

6

  • 分頁組件不能正確分頁
  • 解決方法:定義一個方法,當換頁時會回調這個方法返回新的頁碼,利用新的頁碼向服務端請求該頁數據即可實現分頁。

7

8

  • 點擊按鈕組件后不能及時刷新數據
  • 解決方法:在按鈕組件所觸發的點擊事件方法中加入向服務端請求數據的方法

9

10

總結

對於后端開發人員來說,element ui確實是一個前端開發非常容易上手而且實用的工具。正所謂活到老學到老,學習新知識、接觸新技術都是我們現階段需要做的事。當然學習的過程一定不是一帆風順,就比如我使用的時候大大小小的問題碰到一堆,但是我們一定要先自己動手去排查錯誤,找出問題所在,要利用好網絡資源,前輩們的博客文檔都是精華。自己親自解決錯誤更能加深相關問題的印象。使用vue框架加上element ui組件庫能大大提高開發效率,而且通過修改主題樣式也可以形成自己的風格,總之是一個非常棒的工具。

參考文獻、參考博客

  • element ui使用教程視頻

      標題:適合后端編程人員的 ElementUI教程,結合SpringBoot項目案例,已完結!!!
      作者:編程不良人
      鏈接:https://www.bilibili.com/video/BV1NK4y187XH?p=20
    
  • 正確實現分頁

      標題:使用el
      作者:未知
      鏈接:https://www.dazhuanlan.com/2019/12/05/5de8af700306e/


免責聲明!

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



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