element ui table的使用記錄

2021-10-07 03:32:55 字數 1869 閱讀 4556

table**

table **

用於展示多條結構類似的資料,可對資料進行排序、篩選、對比或其他自定義操作。

element ui 中table**部分鏈結

最近在做表單,用到了element ui中的**,目前就工作中遇到的幾個問題詳細記錄一下:

table** 固定表頭

官網上其實已經有詳細的說明了,那就是給table定義height屬性,就可以實現固定表頭的作用了。

table**中使用switch開關

table**中使用switch等其他元件時,必須要使用slot插槽,而且要使用template包裹,否則觸發不了

而且此時展示資料的時候需要用到scope.row.***的方式來處理插槽中的資料

"shopname" label=

"狀態"

>

"scope"

>

switch v-model=

"status" active-color=

"#13ce66" inactive-color=

"#eaecf0"

>

<

/el-

switch

>

<

/template>

<

/el-table-column>

以上**中的status,因為目前沒有資料,所以是在data中自定義的乙個資料,用於測試使用。

因為使用elememt ui的時間並不是很多,目前發現,如果想要在table中使用其他元件,無論是element ui中的元件,還是自定義的元件,都需要使用template進行包裹,而且使用slot-scope="scope"的插槽形式。

與table**經常配套使用的分頁元件pagination

layout="total, prev, pager, next,sizes"layout引數的順序決定了展示分頁元件的順序,包含每頁條數 頁碼元件 總條數等。

:total="pageobj.total"total引數是總條數

:page-sizes="[50, 100, 150, 200]" :page-size="50"page-sizes是每頁條數的陣列,page-size是當前的每頁條數

"handlesizechange" layout=

"total, prev, pager, next,sizes"

:total=

"pageobj.total" @current-change=

"handlecurrentchange"

:page-sizes=

"[50, 100, 150, 200]"

:page-size=

"50"

/>

函式部分:

//修改頁碼

handlecurrentchange

(current)

,//修改每頁展示的資料

handlesizechange

(val)

Element UI table排序問題

專案需求 選擇框與 的排序列雙向繫結 選擇器 表頭行 placeholder 請選擇 el option el select ref singletable data tabledata default sort tableattribute.sortmethod sort change chang...

elementUI table選中問題

首先說一下我的問題 table可以翻頁,可以選中,選中之後翻頁回來需要預設勾選已經選中的。解決 首先監聽table的選中狀態,用 select,這樣選中的資料不會被清空,在table翻頁請求之後,用 select 監聽的資料和請求後的資料做對比,如果一樣,this.refs.multipletabl...

elementUI Table的行合併通用方法

有些業務需求是需要table進行行合併的,所以就寫了個通用的方法來處理,廢話不多說,先上圖 首先是內部使用el table的方法 span method objectspanmethod data created 例如 如果firstmerge checkroom 合併了三行,受影響的列也應該是最多...