開發中總是會遇到各種ui設計的圖表，最近也一直「沉浸」在負責的兩個專門做資料視覺化的專案中，其中有個**很好玩，效果如下圖：（也不知道會不會壓縮）
本專案主要使用vue、echarts、element ui，來吧，直接開始了。
第一步：咱們需要重新封裝table元件。
"tabledata"
>
v-for=
"(item, index) of tablecolumns"
:key=
"index"
:prop=
"item.key"
:label=
"item.title"
>
<
/el-table-column>
<
/el-table>
第三步：根據tablecolumns處理表頭。
v-for=
"(children, index) in tablecolumn.children"
:label=
"children.title"
:prop=
"children.key"
:key=
"index"
>
"scope"
>
}<
/span>
<
/template>
<
/el-table-column>
tablecolumns: [
, ,, \\ ...
]}, // ...
, \\ ...]}]
,
\\ ...
}
過濾器：
filters:
}
使用：
}<
/span>
固定table的表頭
原貼 另可參考 根據固定表頭的兩種方式 固定表頭兩種方式 1.表頭和表內容分別在兩個table中,互不干擾.優點 實現簡單 缺點 兩個table 的列寬不好保持一致,缺乏靈活性 2.用標籤的屬性來處理 html view plain copy span style font size 18px ht...
固定表頭的table
在前端的開發過程中，時經常使用的一種展現形式。在我的開發過程中，當資料過多時，最常用的一種方式就是分頁，但是有些地方還是需要滾動。通常的table 會隨著滾動，導致表頭看不見。一下是我找到的一種固定表頭的方法。如下 div class t head table class table style c...
vue 封裝元件 （例子table元件）
建立元件的模板，先把架子搭起來，寫寫樣式，考慮好元件的基本邏輯。準備好元件的資料輸入。即分析好邏輯，定好 props 裡面的資料 型別。準備好元件的資料輸出。即根據元件邏輯，做好要暴露出來的方法。封裝完畢了，直接呼叫即可。1.父元件與子元件傳值 父元件傳給子元件 子元件通過props方法接受資料 子...