The problem

One requirement is to add the ability to expand rows in the table.

See the Element documentation (element.eleme.cn/#/zh-CN/com…) This can be done with type=”expand”, but the example is just a form (the “expand row “example).

See below for the table example (” tree data and lazy loading “), but it seems that the requirements of the back-end interface are not quite the same. The requirement on the back end is to click the little arrow to request the data for the expanded row.

The example returns all data directly, as shown below:

But Element still provides asynchronous loading by setting the lazy attribute and the load function. As follows:

But when integrated into the project, load is executed only once. If you click the little arrow the second time, it’s not going to send a request.

This is a bit of a problem, because if you change the data for the expanded row on another page, you can only update the data for the current expanded row by refreshing the page.

The solution

I looked at Element’s documentation and couldn’t find a solution. Later, combined with the expand-change event, it is found that there is a method.

The load will continue, but the load will be triggered again with the expansion-change event.

HTML code:

<el-table
    :data="dataList"
    v-loading="loading"
    class="table"
    row-key="prodInstId"
    lazy
    :load="load"
    :tree-props="{children:'children',hasChildren: 'hasChildren'}"
    @expand-change="handleExpandChange">
Copy the code

Js code:

HandleExpandChange (row, expanded) {if (expanded) {if (this.hasload) { This.hasload = false} else {// otherwise, load is executed. Because load is only executed once, So need to expand event triggers execute this. Again the load (enclosing currentLoadTreeData, ' ', enclosing resolveObj)}}}, async load (tree, treeNode. Load this.hasload = true this.currentLoadTreeData = tree // Cache current resolve this.resolveobj = resolve await this.getReadOnlyDetail(tree, resolve) }, async getReadOnlyDetail(row, resolve) { const params = { prodInstId: row.prodInstId, isOnlyReadInst: true } const res = await http.detail(params) resolve([res.data]) return res }Copy the code

The last

  • The official account “The Little Crayon caterpillar”

If you have any questions, please leave a comment.

If you think the article is ok, please like or bookmark it, thank you.