element.ui框架—Table

先說一下項目里修改element.ui樣式，改樣式之前我們需要整明白style標簽里的scoped是用來限制當前頁面的樣式，也就是說只要加上了scoped那當前頁面的style樣式就只作用于當前頁面，不會污染全局的樣式。scoped對element樣式是有影響的，在修改element樣式時候無論怎么選擇標簽優(yōu)先級都無法改變其樣式，要么把scoped去掉影響全局樣式，要么就是再創(chuàng)建一個style標簽不加scoped，要么就需要使用 ?" >>>" （深度作用選擇器,我最常用方法）

Table-表格添加標簽元素

scope.row.data(data是不固定的，可以是name或者別的)，span的樣式我寫的是一個圓點

data數(shù)據(jù)

效果圖：

效果圖

Table(修改列，單元格)

:cell-style="tableRowStyle"修改單元格樣式，?：row-style=" tableRowStyle "修改行的樣式 ? ? ?tableRowStyle 是一個函數(shù)

修改單元格樣式

pagination分頁的使用（按需加載封裝）

分頁器的使用一般都是需要請求接口拿到數(shù)據(jù)進行頁面的分割和跳轉(zhuǎn)，大多數(shù)時候都是以按需加載請求的數(shù)據(jù)，

currentPage（初始頁面）、pagesize（當前頁面需要展示幾條數(shù)據(jù)）、total（總共多少條數(shù)據(jù)）、tableData(需要遍歷的數(shù)據(jù))

handleCurrentChange是當前頁面改變時觸發(fā)的函數(shù)，回調(diào)參數(shù)是當前頁，那我們就可以根據(jù)這個當前頁面改變時所觸發(fā)的事件進行請求封裝，只要每觸發(fā)一次handleCurrentChange我們就請求一下接口，達到按需請求加載。

根據(jù)頁面展示需求和接口文檔，進行相應的傳參（currentCount、currentNo是根據(jù)接口文檔說明進行的傳參屬性，它們分別表示的是每頁幾條數(shù)據(jù)和展示第幾頁） 這里我把每頁顯示的pagesize寫成死的了，（每頁展示4條數(shù)據(jù)） ，請求到數(shù)據(jù)拿到我們需要的總數(shù)據(jù)條數(shù)（total）和需要遍歷的數(shù)組對象（tableData，也就是頁面的4條數(shù)據(jù)），別忘了在鉤子函數(shù) created 中調(diào)用封裝的方法（ ?this.ports（） ）

最后在需要的地方進行v-for遍歷展示我們的數(shù)據(jù)就行了

echarts使用—餅圖

我的需求是只需要一個圓，沒有折線和其他的提示文本，也就是將echarts餅圖進行了簡單的分解，（滑動效果還是有的，下面的文字為自己寫的標簽，并不是echarts里面的）如圖所示：

那首先我們需要一個容器來展示echarts，我把它放在id為tb的div里：

類名bigRadiu為定位在中間白色的圓，股權占比沒顯示可以不用管，（因為截圖和上面的不是同一個容器）

color顏色的順序是和option里面的data順序?qū)?，center["42%" "50%"]表示的是圓的X軸和Y軸距離，startAngle表示的是顏色開始的地方或者角度，默認為圓的右上。

接下來就是獲取Dom元素，添加內(nèi)容了

上面的data數(shù)據(jù)是沒有帶滑過提示消息的，如果需要，需在option下面加上tooltip數(shù)據(jù)，看下圖

里面是有ABCD4個值的，這里只展示了2個，echarts這里說的不是很詳細，網(wǎng)上有很多詳細的資料可以參考