這篇文章主要介紹如何使用element-ui table expand展開行實(shí)現(xiàn)手風(fēng)琴效果，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了張家港免費(fèi)建站歡迎大家使用！

先展示一下ElementUI官方提供的示例代碼效果圖

可以看到官方代碼中在這邊沒有讓這個可展開table自動折疊的功能，我點(diǎn)擊了別的標(biāo)簽頁后上次點(diǎn)擊的行仍舊處在一個展開的狀態(tài)，而且操控的方式也只能點(diǎn)擊到左上角的小箭頭才可以控制行的展開狀態(tài)，體驗(yàn)不是特別好，可以說有點(diǎn)糟糕了，但是我后來在后面的文檔中發(fā)現(xiàn)The methods 里面有寫到一個方法叫toggleRowExpansion，這個方法應(yīng)該是官方本意上想讓我們來自由控制展開狀態(tài)的，從傳遞的兩個參數(shù)來看，一個是row（當(dāng)前點(diǎn)擊的行id），另一個是expended（行展開狀態(tài)，boolean值），看上去有理有據(jù)，但是就是不知道怎么用，因?yàn)槲沂冀K無法獲取到expended這個參數(shù)的值，有點(diǎn)氣，所以這次我們用另一種方式來實(shí)現(xiàn)這個功能。

代碼實(shí)現(xiàn)：

核心是 row-key、expand-row-keys屬性

特別要注意的是row-key傳入的是一個Function(row)，而expand-row-keys傳入的是一個數(shù)組，元素的值是要展開的row的key。

row-key這個屬性是獲取當(dāng)前行號的，expand-row-keys這個屬性是獲取到展開的行號的，所以前者為一個單值，而后者是一個數(shù)組形式，所以這個屬性也同樣適用于表格多選列這種情況。

        
         
          
           
            {{ props.row.com_name }}
           
           
            {{ props.row.fct_id }}
           
           
            {{ props.row.fct_name }}
           
           
            {{ props.row.user_name }}
           
           
            {{ props.row.password }}
           
           
            {{ props.row.join_time | formatDate}}
           
           
            {{ props.row.leave_time }}
           
          
         
        
        
        
        
        
        
         
          編輯
          刪除
         
        
       

這邊因?yàn)橐婕暗轿翼?xiàng)目最終實(shí)現(xiàn)的效果，所以我這里就直接把我的整個table都復(fù)制上來了，這邊的重點(diǎn)主要是table的各個屬性，也就是這個代碼段的開頭，我們在這里涉及到了一個新的監(jiān)聽事件@current-change="toggleRowExpansion"，這個事件表示切換行的時候會有一個觸發(fā)的事件發(fā)生，我們在獲取了行id，展開行id之后，還要去data里面定義我們所要用到的數(shù)據(jù)框架。

 data() {
   return {
    compony:[],
    // 獲取row的key值
    getRowKeys(row) {
      return row.id;
    },
    form: {},
    // 要展開的行，數(shù)值的元素是row的key值
    expands: [],
   }
  },

這邊我就展示所需要用到的數(shù)據(jù)布置了，通過getRowKeys方法獲取到row的行id值，定義一個expands展開行的數(shù)組，最后是業(yè)務(wù)邏輯代碼

 data() {
   return {
    compony:[],
    // 獲取row的key值
    getRowKeys(row) {
      return row.id;
    },
    form: {},
    // 要展開的行，數(shù)值的元素是row的key值
    expands: [],
   }
  },

因?yàn)槲覀儸F(xiàn)在只要求展開一行，所以每次把需要展開行的id儲存進(jìn)數(shù)組時要先清空一次數(shù)組，然后在push進(jìn)去，最終實(shí)現(xiàn)效果圖

以上是“如何使用element-ui table expand展開行實(shí)現(xiàn)手風(fēng)琴效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：如何使用element-uitableexpand展開行實(shí)現(xiàn)手風(fēng)琴效果-創(chuàng)新互聯(lián)
鏈接地址：http://weahome.cn/article/dehhso.html