使用element-ui table expand展開行實現(xiàn)手風(fēng)琴效果

更新時間：2019年03月15日 15:07:59 作者：鐘大靈

這篇文章主要介紹了使用element-ui table expand展開行實現(xiàn)手風(fēng)琴效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

問題講解：

在使用vue版本的ElementUI中的table功能的時候還是遇到了一些問題，可以說餓了么團隊在這個UI框架的文檔撰寫已經(jīng)非常不錯了，不過還是有一些方法乍一看讓人摸不著頭腦，有些table的常用功能示例代碼提供的不是非常詳細(xì)，所以這次針對這個可展開表格實現(xiàn)手風(fēng)琴效果寫一篇博客探討一下。

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

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

代碼實現(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ù)組形式，所以這個屬性也同樣適用于表格多選列這種情況。

<el-table
        :data="compony"
        style="width: 100%;margin-top:80px"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @current-change="toggleRowExpansion">
        <el-table-column type="expand">
         <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
           <el-form-item label="公司名稱">
            <span>{{ props.row.com_name }}</span>
           </el-form-item>
           <el-form-item label="下屬電廠ID">
            <span>{{ props.row.fct_id }}</span>
           </el-form-item>
           <el-form-item label="電廠名稱">
            <span>{{ props.row.fct_name }}</span>
           </el-form-item>
           <el-form-item label="用戶名">
            <span>{{ props.row.user_name }}</span>
           </el-form-item>
           <el-form-item label="密碼">
            <span>{{ props.row.password }}</span>
           </el-form-item>
           <el-form-item label="加入時間">
            <span>{{ props.row.join_time | formatDate}}</span>
           </el-form-item>
           <el-form-item label="離開時間">
            <span>{{ props.row.leave_time }}</span>
           </el-form-item>
          </el-form>
         </template>
        </el-table-column>
        <el-table-column
         label="公司 ID"
         prop="com_id">
        </el-table-column>
        <el-table-column
         label="公司名稱"
         prop="com_name">
        </el-table-column>
        <el-table-column label="操作">
         <template slot-scope="scope">
          <el-button
           size="mini"
           @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
          <el-button
           size="mini"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
         </template>
        </el-table-column>
       </el-table>

這邊因為要涉及到我項目最終實現(xiàn)的效果，所以我這里就直接把我的整個table都復(fù)制上來了，這邊的重點主要是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: [],
   }
  },

因為我們現(xiàn)在只要求展開一行，所以每次把需要展開行的id儲存進數(shù)組時要先清空一次數(shù)組，然后在push進去，最終實現(xiàn)效果圖