Example of how to implement embedded table with vue+elementUI

Example of how to implement embedded table with vue+elementUI

During my internship in my senior year, I encountered a special requirement, which required me to click on the number of a piece of data in a table, and a new table would appear below the data. This requirement is also covered in the official documentation of element UI. The following is the final implementation effect after referring to other blogs (I can't find the blog address) and element UI.

Rendering

I don’t know if it’s because the company’s computers are slow or if there’s a software problem that causes the recorded motion graphics to be so laggy, but it doesn’t lag in actual operation.

insert image description here

Code:

Page display code:

The main code is <el-table-column type="expand" width="1" >
Official explanation type="expand" :
通過設置type="expand" 和Scoped slot 可以開啟展開行功能，el-table-column 的模板會被渲染成為展開行的內容，展開行可訪問的屬性與使用自定義列模板時的Scoped slot 相同。
Finally, by setting el-table-column to type="expand" with width="1" , the arrow icon that appears is hidden.

The entire code flow is as follows:
The data table is divided into main table and sub-table. When the page is first loaded, the main table data (that is, the ordinary table data table, called the main table) is displayed. When I click on the navigation name of a row of data in the main table, a click event toogleExpand() is triggered. The main function of this event is to search the corresponding sub-table data in the background according to the ID of the clicked data and return it to the front end, and finally the front end displays it.
What is worth noting in this process is how to bind the sub-table data with the main table data one by one after obtaining the corresponding data.
Here I implement it by using Map, with the main table ID as the key and the sub-table data as the value.

// Use map structure to save translation list this.WebsiteLangMap.set(id,response.rows)

At this point there is still a problem.
When the page is just loaded, the first click to open the corresponding embedded table will have no data. Only when it is opened for the second time will there be data.
Because when the table is rendered for the first time, the Map of sub-table data we saved has no data, so the first click will not display data (how to render without data). The data we obtain is the data requested after the click event toogleExpand() is triggered. That is, data is available only after rendering. I originally thought that it could be like a listener, able to listen to data changes in real time and render the page, but it can't.
The solution is to control the key attribute of el-table and change the key value when the sub-table data changes.

this.websiteLangTableKey = !this.websiteLangTableKey;

The following is the core code:

<el-table 
      v-loading="loading" 
      :data="websiteList" 
      @selection-change="handleSelectionChange"
      ref="table"
      key="websiteTable"
      row-key="id"
      style="width: 100%; maxin-bottom: 20px;"
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column :label="td('primary key')" align="center" prop="id" /> -->
      <el-table-column :label="td('Parent navigation')" align="center" prop="parentId" />
      <el-table-column :label="td('Navigation Name')" 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('Is it a link')" align="center" prop="isLink" />
      <el-table-column :label="td('Link address')" align="center" prop="url" />
      <el-table-column :label="td('Creation Date')" align="center" prop="createTime" />
      <el-table-column :label="td('Create User')" align="center" prop="createBy" />
      <el-table-column :label="td('Update time')" align="center" prop="updateTime" />
      <el-table-column :label="td('Update User')" align="center" prop="updateBy" />
      <el-table-column :label="td('Remarks')" align="center" prop="remark" />
      <el-table-column :label="td('Operation')" 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("Modify")}} </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['cms:website:remove']"
          >{{td("Delete")}}</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 primary key')" align="center" prop="langId" /> -->
            <!-- <el-table-column :label="td('Navigation ID')" align="center" prop="webId" /> -->
            <el-table-column :label="td('Language Code')" align="center" prop="langCode" />
            <el-table-column :label="td('Language Name')" align="center" prop="langName" />
            <el-table-column :label="td('中文')" align="center" prop="langCn" />
            <el-table-column :label="td('Language Translation')" align="center" prop="langTranslate" />
            <el-table-column :label="td('Remarks')" align="center" prop="remark" />
            <el-table-column :label="td('Operation')" 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("Modify")}} </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteLang(scope.row)"
                  v-hasPermi="['cms:websiteLang:remove']"
                >{{td("Delete")}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>

	//Embedded table 
    toogleExpand(row) {
      this.getListLang(row.id);
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row)
    },
     /** Query navigation translation list*/
    getListLang(id) {
       // Get the translation list based on the navigation ID this.LangQueryParams.webId = id;
      listWebsiteLang(this.LangQueryParams).then(response => {
        // Use map structure to save translation list 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>

This concludes this article about the example of how to implement embedded table in vue+elementUI. For more relevant vue element embedded table content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Sample code for implementing multiple selection based on nested Table in ElementUI
  • Element realizes table nesting and multiple tables share one header
  • Vue elementUI form validation implementation code (multi-layer nesting)
  • Vue elementUI form validation function array multi-layer nesting

<<:  Deployment and configuration of Apache service under Linux

>>:  MySQL transaction details

Recommend

Detailed explanation of Docker+Jenkins+Gitlab+Django application deployment practice

1. Background In the context of rapid updates and...

MySQL 8.0.18 installation and configuration method graphic tutorial

This article records the installation and configu...

Vue Router loads different components according to background data

Table of contents Requirements encountered in act...

MySQL 8.0.16 installation and configuration tutorial under CentOS7

Uninstall the old version of MySQL (skip this ste...

Introduction to Docker containers

Docker Overview Docker is an open source software...

How MySQL handles implicit default values

Some students said that they encountered the prob...

Detailed explanation of the difference and usage of quotes and backticks in MySQL

Preface So I wrote this blog. This blog also reco...

How to view and close background running programs in Linux

1. Run the .sh file You can run it directly using...

The easiest way to create a new user and grant permissions to MySQL

Create a user: create user 'oukele'@'...

Tutorial on installing mysql5.7.17 via yum on redhat7

The RHEL/CentOS series of Linux operating systems...

How to recover deleted MySQL 8.0.17 root account and password under Windows

I finished learning SQL by myself not long ago, a...

Detailed explanation of basic syntax and data types of JavaScript

Table of contents Importing JavaScript 1. Interna...

Detailed explanation of data types in JavaScript basics

Table of contents 1. Data Type 1.1 Why do we need...

How to modify the time in centos virtual machine

The one above shows the system time, and the one ...

Methods for defragmenting and reclaiming space in MySQL tables

Table of contents Causes of MySQL Table Fragmenta...