這篇文章給大家分享的是有關(guān)element ui table如何實(shí)現(xiàn)點(diǎn)擊一行展開(kāi)功能的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
創(chuàng)新互聯(lián)建站主營(yíng)民和網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app開(kāi)發(fā)定制,民和h5微信小程序定制開(kāi)發(fā)搭建,民和網(wǎng)站營(yíng)銷推廣歡迎民和等地區(qū)企業(yè)咨詢前言
element ui是一個(gè)非常不錯(cuò)的vue的UI框架,element對(duì)table進(jìn)行了封裝,簡(jiǎn)化了vue對(duì)表格的渲染。
element ui表格中有一個(gè)功能是展開(kāi)行,在2.0版本官網(wǎng)例子中,只可以點(diǎn)擊右箭頭可以展開(kāi),我們的很多需求是點(diǎn)擊某一行展開(kāi)
那是不是無(wú)法實(shí)現(xiàn)呢?其實(shí),借助element ui的一些屬性,輕松實(shí)現(xiàn)點(diǎn)擊某行展開(kāi),我們還是用2.0.9版本官網(wǎng)的例子,
對(duì)齊改造,使之可以做到這點(diǎn)
{{ props.row.name }} {{ props.row.shop }} {{ props.row.id }} {{ props.row.shopId }} {{ props.row.category }} {{ props.row.address }} {{ props.row.desc }}
這個(gè)例子可以直接復(fù)制運(yùn)行起來(lái),一點(diǎn)問(wèn)題都沒(méi)有,上面的代碼可以實(shí)現(xiàn)點(diǎn)擊某行展開(kāi),對(duì)比官網(wǎng)的例子,我們?cè)趖able添加了
row-key="id" :expand-row-keys="expands" @row-click="rowClick"
這里有2個(gè)問(wèn)題:
1.數(shù)據(jù)中每項(xiàng)沒(méi)有一個(gè)唯一標(biāo)示怎么辦?
2.實(shí)現(xiàn)展開(kāi)當(dāng)前行的時(shí)候,其他行都能收起來(lái)
這2個(gè)問(wèn)題也很簡(jiǎn)單。第2個(gè)問(wèn)題,在rowClick函數(shù)給expands添加之前,先清空這個(gè)數(shù)組。
if (this.expands.indexOf(row.id) < 0) { this.expands = [] this.expands.push(row.id); } else { this.expands.remove(row.id); }
感謝各位的閱讀!關(guān)于“element ui table如何實(shí)現(xiàn)點(diǎn)擊一行展開(kāi)功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。