獲取element table 展開行展開狀態
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>