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