ElementUI table 组件展开 expand,动态更新数据时,视图没有自动更新

周羊羊

这是因为在给table的数据赋值时,展开的视图对应的字段不存在。(动态增加属性)
拿到table数据后,先把展开字段初始化,然后再赋值,问题就解决了~~
比如,之前是:

this.list = api.getList()

改成:

let list = api.getList()
list.forEach((item)=>{
    item.detail = '' // 假设展开的字段是detail
})
this.list = list

我实际的代码大概是这样的,一个table套另一个table

<template>
    <el-table ref="table"
    :data="list"
    @expand-change="onExpandChange">
        <el-table-column type="expand">
            <template slot-scope="scope">
                <el-table :data="scope.row.subTable" size="small">
                    <el-table-column label="姓名">
                        <template slot-scope="scope">
                            {{scope.row.name}}
                        </template>
                    </el-table-column> 
                </el-table> 
                <el-pagination  layout="prev,pager,next"
                                :current-page="scope.row.page||1"
                                :total="scope.row.total||0"
                                @current-change="(page)=>onSubtablePageChange(page, scope.row)"></el-pagination>
            </template> 
        </el-table-column> 
    </el-table>
 </template>

先调一个接口拿list的数据,然后再掉一个接口拿list[i].subTable的数据,第一个接口的数据没有subTable这个字段,所以后来再赋值的时候视图没有自动更新,只要在第一次拿数据的时候给每个数据加上这个字段就可以了

method: {
    //// 拿外层table数据
    async getList() {
        let params = {
            page: this.page,
        }
        let res = await task.getTaskList(params)

        /*这里是要加的代码,把展开的字段加上去就好了*/
        res.rows.forEach(row => {
            row.subTable = []
            row.total = 0
        })

        this.list = res.rows
        this.total = res.total
    },


    //// 拿展开的subtable数据
    async getSubtable(row) {
        let params = {
            id: row.id,
            page: row.page
        }
        if (!row || !row.id) {
            return
        }
        let res = await task.getSubtable(params)
        row.subTable = res.rows
        row.total = res.total
    },
}

-----------------分割线,下面的内容是之前写的,能解决问题,但是这种方法不好------------------

在更新数据后,调用一下this.$refs.table.toggleRowExpansion()就好了

/////// 这不是“正确”的解决方法,只是我做了很多尝试之后试出来的一个 hack,很凑巧地能解决问题……

////// 看源码,调用 toggleRowExpansion 方法,源码里会调用this.scheduleLayout(); 再调用 this.table.debouncedUpdateLayout(); 然后视图就更新了……

这样的页面:
image

代码:

<el-table ref="table"
          // 省略其他代码
          ></el-table>
  async getSubTable(row) {
      let params = {
        id: row.id,
        page: row.page
      }
      let res = await task.getSubTable(params)
      row.detail = res.rows
      row.total = res.total
      this.$refs.table.toggleRowExpansion()
  },
阅读 2.9k

一只可爱的羊(๑•.•๑)

744 声望
17 粉丝
0 条评论
你知道吗?

一只可爱的羊(๑•.•๑)

744 声望
17 粉丝
文章目录
宣传栏