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

How to solve the background tiling and border breaking of CSS style div or li in IE6

The solution to the background tiling or border br...

Vue3+Element+Ts implements basic search reset and other functions of the form

After switching from Vue2's writing style to ...

MySQL 8.0.18 Installation Configuration Optimization Tutorial

Mysql installation, configuration, and optimizati...

How to use webpack and rollup to package component libraries

Preface I made a loading style component before. ...

Detailed explanation of the solution to the problem of automatic disconnection of xshell remote connection

Solution to the problem of automatic disconnectio...

Sample code for implementing rolling updates of services using Docker Swarm

1. What is Docker Swarm? Docker Swarm is a cluste...

Detailed example of jQuery's chain programming style

The implementation principle of chain programming...

The difference between html empty link href="#" and href="javascript:void(0)"

# contains a location information. The default anc...

Detailed explanation of installing redis in docker and starting it as a configuration file

Update: Recently, it was discovered that the serv...

Installation of CUDA10.0 and problems in Ubuntu

The correspondence between tensorflow version and...

Vue 2.0 Basics in Detail

Table of contents 1. Features 2. Examples 3. Opti...

A brief comparison of Props in React

Table of contents Props comparison of class compo...

TypeScript union types, intersection types and type guards

Table of contents 1. Union Type 2. Crossover Type...

Web page HTML code: production of scrolling text

In this section, the author describes the special...

mysql uses stored procedures to implement tree node acquisition method

As shown in the figure: Table Data For such a tre...