您當前的位置:首頁 > 舞蹈

獲取element table 展開行展開狀態

作者:由 淡然自若 發表于 舞蹈時間:2022-03-03

element UI元件提供了table的展開和收起功能,

並提供了expand-change事件用來監聽table行的展開和收起。

// 虛擬碼

<

template

>

<

el

-

table

@

expand

-

change

=

“handleExpandChange”

><

/el-table>

<

/template>

<

script

>

export

default

{

methods

{

handleExpandChange

()

{

// Do some things

}

}

}

<

/script>

在一些特殊情況下如處理非同步資料時,希望展開行時請求介面,關閉行時不用請求,但是expand-change監聽事件,無論是展開還是收起都會觸發,於是就希望能有一個類似isExpended布林型別的狀態屬性來輔助實現該功能。

// 虛擬碼

<

template

>

<

el

-

table

@

expand

-

change

=

“handleExpandChange”

><

/el-table>

<

/template>

<

script

>

export

default

{

methods

{

handleExpandChange

isExpend

{

// 期望有這麼一個isExpend

if

isExpend

{

// Do some things

}

else

{

return

}

}

}

}

<

/script>

但是element並沒有提供,或者是我沒找到,如果有知道的可以告訴我,謝謝!

於是就藉助expand-change的入參變相實現了該功能

expand-change

當用戶對某一行展開或者關閉的時候會觸發該事件(展開行時,回撥的第二個引數為 expandedRows;樹形表格時第二引數為 expanded)

row, (expandedRows | expanded)

expand-change會獲取兩個引數,第一個引數是當前行的資料,第二個引數是當前

展開

行的陣列,

:展開時陣列加一收起時陣列減一。

如果設定table展開列只能有限展開一行時可以根據第二個引數的length來進行判斷,如果允許同時展開多行時,這需要判斷第二個引數陣列中是否包含第一個引數的值,如果包含則是展開,如果不包含則是收起。

// 虛擬碼

<

template

>

<

el

-

table

@

expand

-

change

=

“handleExpandChange”

><

/el-table>

<

/template>

<

script

>

export

default

{

methods

{

handleExpandChange

row

rows

{

// 假設每行資料中有一個id屬性

const

isExpend

=

rows

some

r

=>

r

id

===

row

id

// 判斷當前行展開狀態

if

isExpend

{

// Do some things

}

else

{

return

}

}

}

}

<

/script>

標簽: Table  expand  change  展開  Template