-
最近在用Vue.js和elment-ui做一個后台管理項目,不得不說element功能非常強大,提供了許多組件,基本可以滿足一些基礎的開發了.因為我做的后台系統,里面表格用到比較多,但是其實我也只是一個剛入行不久的菜鳥,只看官方文檔,開發起來還是有難度.不過經過不停的測試以及查閱資料,還是勉強實現了效果,這里就把一些方法分享出來,希望對初學者有一些幫助吧.
- 如下圖,element表格是自帶了一些樣式的
-
但是有時候我們要自己設置一些樣式怎么辦呢?官網的樣式字體默認是往左,有時候我們需要居中,其實官網也給出了參數,可以通過設置align來改變某一行的樣式.但是如果需要改變的全部呢,總不能每行都設置吧,一開始我是自己在樣式里重新設置了text-align:center,也是可以實現居中效果.不過實際的情況是,一個表格里很多時候是單獨有幾行需要居中,其他的要居左,這樣就比較麻煩了,不一樣的樣式又要單獨控制.這個組件的設計者也考慮到了,給了兩種方式,一種是添加類名的回調cell-class-name,一種是直接設置樣式的回調cell-style.
-
一開始看到這兩個參數,有點懵,不知道怎么使用,官網也沒給例子(可能因為太簡單了(￣▽￣)／).不過我想還是有一些人和樓主一樣小白不知道使用的,所以這里說明一下:cell-class-name是你在CSS文件里先定義一個類名,里面寫好樣式,然后通過回調賦值給這個單元格;cell-style是在回調里直接設置樣式,具體的見圖ヽ(￣▽￣)ﾉ這里說一下,行和表頭的設置方法也是一樣的哈
-
-
-
-
-
這樣就能實現一個簡單的表格定制了.(๑◡๑)另外,因為表格里的數據最終是后台提供給我們的,所以有時候數據是存在空值的情況,這個時候可以做一些判斷,以免表格空白.官網沒有具體說這個,但是可以通過其他的實例推測出來,如下圖
-
通過scope這個屬性,我們可以取到當前渲染的元素,可以通過判斷,如果傳入的有值就顯示,沒有就給一個替換
-
-
這樣就設置好了,ヾ(๑╹◡╹)ﾉ"