Shulou(Shulou.com)06/02 Report--

This article mainly introduces vue+elementUI how to achieve embedded table, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Effect picture

I do not know whether it is the company's computer or software problems that cause the recorded dynamic picture to be very stuck, but it will not be stuck in practice.

Code:

Page display code:

The main code is

Type= "expand" official explanation:

The function of expanding rows can be enabled by setting type= "expand" and Scoped slot, and the template of el-table-column will be rendered as the contents of the expanded rows, with the same properties that can be accessed by expanding rows as when using custom column templates.

Finally, the arrow icon displayed after setting el-table-column to type= "expand" through width= "1" is hidden.

The whole code flow is roughly as follows:

The data table is divided into the main table and the child table. The table data of the main table is displayed at the beginning of the page load (that is, the ordinary table data table is called the main table). 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 go to the background to find the corresponding sub-table data according to the ID of the click data and return it to the front end, and finally the front end is displayed.

What is worth paying attention to in this process is how to bind the child table data of the corresponding data to the master table data one by one.

Here I do this by using Map, by taking the main table ID as the key and the child table data as value.

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

There is still a problem at this stage.

When the page is just loaded, the first click to open the corresponding embedded table has no data, only the second click to open will have the data.

Because there is no data in the Map of the child table data we saved when table renders for the first time, the first click will not display the data (how to render without data). And we get the data that will be requested after the click event toogleExpand () is triggered. That is, the data is not available until it is rendered. I thought it could, like a listener, listen for changes in data and render the page in real time, but it couldn't.

The solution is to control the key property of el-table, and the value of key is changed when the data in the child table changes.

This.websiteLangTableKey =! this.websiteLangTableKey

Here is the core code:

{{scope.row.barName}} {{td ("modify")}} {{td ("delete")}} {{td ("modify")}} {{td ("delete")} / / embedded table toogleExpand (row) {this.getListLang (row.id) Let $table = this.$refs.table; $table.toggleRowExpansion (row)}, / * * query navigation translation list * / getListLang (id) {/ / get translation list this.LangQueryParams.webId = id according to navigation ID ListWebsiteLang (this.LangQueryParams) .then (response = > {/ / use the map structure to save the translation list this.WebsiteLangMap.set (id,response.rows) this.websiteLangTableKey =! this.websiteLangTableKey; this.resetLang ();});}, .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 }} Thank you for reading this article carefully. I hope the article "how to achieve embedded table in vue+elementUI" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.