vue+elementUI實現(xiàn)內(nèi)嵌table的方法示例

更新時間：2021年12月28日 15:39:54 作者：一天無聊

本文主要介紹了vue+elementUI實現(xiàn)內(nèi)嵌table的方法示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在大四實習工作中碰到一個比較特別的需求，要求在一個 table 表格中點擊一條數(shù)據(jù)的編號，在該條數(shù)據(jù)下方出現(xiàn)一個新的 table 表格。這個需求在 element UI 的官方文檔中也有案例，以下是參考了其他博客（找不到博客地址了）和 element UI 之后的最終實現(xiàn)效果。

效果圖

不知道是公司電腦比較拉，還是軟件問題導(dǎo)致錄制出來的動態(tài)圖很卡，但是在實際操作并不會卡。

在這里插入圖片描述

代碼：

頁面顯示代碼：

主要代碼在于 <el-table-column type="expand" width="1" >
type="expand" 官方解釋：
通過設(shè)置 type="expand" 和 Scoped slot 可以開啟展開行功能，el-table-column 的模板會被渲染成為展開行的內(nèi)容，展開行可訪問的屬性與使用自定義列模板時的 Scoped slot 相同。
而最后通過 width="1" 將 el-table-column 設(shè)置為 type="expand"之后自帶顯示的箭頭圖標隱藏。

整個代碼流程大致如下：
數(shù)據(jù)表分為主表和子表，頁面最開始加載時展示主表 table 數(shù)據(jù)（也就是普通的 table 數(shù)據(jù)表格，就叫它主 table ）。當我點擊主 table 中的一行數(shù)據(jù)的導(dǎo)航名稱時，觸發(fā)一個點擊事件 toogleExpand() 。這個事件的主要功能是根據(jù)點擊數(shù)據(jù)的 ID 去后臺查找與其對應(yīng)的子表數(shù)據(jù)返回到前端，最后前端在進行展示。
這過程比較值得注意的是，拿到對應(yīng)數(shù)據(jù)的子表數(shù)據(jù)之后，怎么與主表數(shù)據(jù)一一綁定。
這里我是通過使用 Map 的方式實現(xiàn)的，通過以主表 ID 為 key ，子表數(shù)據(jù)為 value .

// 使用 map 結(jié)構(gòu)的方式保存翻譯列表
this.WebsiteLangMap.set(id,response.rows)

到了這一步還存在一個問題。
在頁面剛加載的時候第一次點擊打開對應(yīng)的內(nèi)嵌 table 是沒有數(shù)據(jù)的，只有第二次點擊打開才會有數(shù)據(jù)。
因為是 table 第一次渲染的時候我們保存的子表數(shù)據(jù)的 Map 是沒有數(shù)據(jù)的，所以第一次點擊并不會顯示數(shù)據(jù)（沒有數(shù)據(jù)怎么渲染）。而我們獲取數(shù)據(jù)是在點擊事件 toogleExpand() 觸發(fā)之后會請求到的數(shù)據(jù)。也就是先渲染后才有數(shù)據(jù)。原先我以為它能像監(jiān)聽器一樣，能實時監(jiān)聽 data 的變化而渲染頁面，然而并不能。
解決辦法是：控制 el-table 的 key 屬性，在子表數(shù)據(jù)發(fā)生變化是改變的 key 的值。

this.websiteLangTableKey = !this.websiteLangTableKey;

以下是核心代碼：

<el-table 
      v-loading="loading" 
      :data="websiteList" 
      @selection-change="handleSelectionChange"
      ref="table"
      key="websiteTable"
      row-key="id"
      style="width: 100%; maigin-bottom: 20px;"
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column :label="td('主鍵')" align="center" prop="id" /> -->
      <el-table-column :label="td('上級導(dǎo)航')" align="center" prop="parentId" />
      <el-table-column :label="td('導(dǎo)航名稱')" align="center" prop="barName" >
        <template slot-scope="scope" >
          <el-link type="primary" :underline="false" @click="toogleExpand(scope.row)" >
            {{scope.row.barName}}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column :label="td('是否鏈接')" align="center" prop="isLink" />
      <el-table-column :label="td('鏈接地址')" align="center" prop="url" />
      <el-table-column :label="td('創(chuàng)建日期')" align="center" prop="createTime" />
      <el-table-column :label="td('創(chuàng)建用戶')" align="center" prop="createBy" />
      <el-table-column :label="td('更新時間')" align="center" prop="updateTime" />
      <el-table-column :label="td('更新用戶')" align="center" prop="updateBy" />
      <el-table-column :label="td('備注')" align="center" prop="remark" />
      <el-table-column :label="td('操作')" align="center" width="130" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['cms:website:edit']"
          >{{td("修改")}} </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['cms:website:remove']"
          >{{td("刪除")}}</el-button>
        </template>
      </el-table-column>

      <el-table-column type="expand" width="1" >
        <template slot-scope="scope">
          <el-table 
            v-loading="loading" 
            style="width: 100%"
            row-key="langId"
            :key="websiteLangTableKey"
            :data="WebsiteLangMap.get(scope.row.id)"
            class="table-in-table"
          >
            <!-- <el-table-column :label="td('ID主鍵')" align="center" prop="langId" /> -->
            <!-- <el-table-column :label="td('導(dǎo)航ID')" align="center" prop="webId" /> -->
            <el-table-column :label="td('語言編號')" align="center" prop="langCode" />
            <el-table-column :label="td('語言名稱')" align="center" prop="langName" />
            <el-table-column :label="td('中文')" align="center" prop="langCn" />
            <el-table-column :label="td('語言翻譯')" align="center" prop="langTranslate" />
            <el-table-column :label="td('備注')" align="center" prop="remark" />
            <el-table-column :label="td('操作')" align="center" width="130" class-name="small-padding fixed-width" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateLang(scope.row)"
                  v-hasPermi="['cms:websiteLang:edit']"
                >{{td("修改")}} </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteLang(scope.row)"
                  v-hasPermi="['cms:websiteLang:remove']"
                >{{td("刪除")}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>

	// 內(nèi)嵌 table 
    toogleExpand(row) {
      this.getListLang(row.id);
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row)
    },
     /** 查詢導(dǎo)航翻譯列表 */
    getListLang(id) {
       // 根據(jù) 導(dǎo)航ID 獲取翻譯列表
      this.LangQueryParams.webId = id;
      listWebsiteLang(this.LangQueryParams).then(response => {
        // 使用 map 結(jié)構(gòu)的方式保存翻譯列表  
        this.WebsiteLangMap.set(id,response.rows)
        this.websiteLangTableKey = !this.websiteLangTableKey;
        this.resetLang();
      });
    },

<style lang="scss" scoped>
.app-container {
  ::v-deep {
    .el-table th {
      background: #ddeeff;
    }
    .el-table__expanded-cell {
      border-bottom: 0px;
      border-right: 0px;
      padding: 0px 0px 0px 47px;
    }
  }
  .table-in-table {
    border-top: 0px;
  }
}
</style>

到此這篇關(guān)于vue+elementUI實現(xiàn)內(nèi)嵌table的方法示例的文章就介紹到這了,更多相關(guān)vue element內(nèi)嵌table內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: