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

Solution to the conflict between two tabs navigation in HTML

Let's start with a description of the problem...

What magical uses does CSS filter have

background Basic Concepts CSS filter property app...

How to change the default character set of MySQL to utf8 on MAC

1. Check the character set of the default install...

JavaScript to achieve full or reverse selection effect in form

This article shares the specific code of JavaScri...

js to implement collision detection

This article example shares the specific code of ...

MySQL index leftmost principle example code

Preface I was recently reading about MySQL indexe...

How to create a style guide for your website in web interface design (with pictures and text)

What is a style guide? Simply put, it’s a document...

Detailed explanation of the use of nohup /dev/null 2>&1

nohup command: If you are running a process and y...

Linux completely removes node.js and reinstalls it through the yum command

first step Delete it once with the built-in packa...

Methods for backing up Windows server files locally, Windows server data backup solutions

Important data must be backed up, and must be bac...

WeChat applet realizes horizontal and vertical scrolling

This article example shares the specific code for...

MySQL 5.7.13 installation and configuration method graphic tutorial (win10 64 bit)

This article shares with you the graphic tutorial...

Summary of various ways to create objects in js and their advantages and disadvantages

Table of contents Early creation method Factory P...

MySQL essential basics: grouping function, aggregate function, grouping query detailed explanation

Table of contents 1. Simple to use 2. Use DISTINC...

Detailed explanation of software configuration using docker-compose in linux

Preface This article will share some docker-compo...