这是因为在给table的数据赋值时,展开的视图对应的字段不存在。(动态增加属性)

拿到table数据后,先把展开字段初始化,然后再赋值,问题就解决了~~

比如,之前是:this.list = api.getList()

改成:let list = api.getList()

list.forEach((item)=>{

item.detail = '' // 假设展开的字段是detail

})

this.list = list

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

:data="list"

@expand-change="onExpandChange">

{{scope.row.name}}

:current-page="scope.row.page||1"

:total="scope.row.total||0"

@current-change="(page)=>onSubtablePageChange(page, scope.row)">

先调一个接口拿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(); 然后视图就更新了……

这样的页面:

代码:

// 省略其他代码

>

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()

},

html表格内容自动更新,ElementUI table 组件展开 expand,动态更新数据时,视图没有自动更新...相关推荐

  1. elementui table组件和popover实现表格列内容过长,显示隐藏多余字段,hover显示所有内容;无内容或则内容少则不显示popover

    elementui table组件和popover实现表格列内容过长,显示隐藏多余字段,hover显示所有内容:无内容或则内容少则不显示popover 1.场景效果 2.实现 3.进阶版 1.场景效果 ...

  2. ElementUI table组件,表格组件,单击单元格可编辑逻辑

    ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...

  3. element-ui table 指定单元格动态字体颜色设置

    element-ui table 指定单元格动态字体颜色设置 根据后端返回的值,动态的自动变更element-ui table 指定单元格的字体的颜色或者整行的颜色值 一.指定单元格突出显示颜色,如: ...

  4. oracle更新数据没反应,ORACLE更新数据时如果有就更新没有就插入

    SQL写法: begin update table_name set salary = 10000 where emp_id = 5; if sql%notfound then insert into ...

  5. 如何解决mui-scroll-wrapper组件在动态获取数据时滚动或者滑动失效的问题(亲测有效)

    第一次些博客,如果有写的不好的地方,请见谅!! ##由于需要使用MUI制作公司的一个APP,因此跟着MUI官方帮助文档进行了代码的测试,大部分组建都能够达到想要的效果,但是在测试popover+scr ...

  6. element-ui table组件如何高度自适应、el-table的x、y轴都出现滚动条右下角会出现一个小白块 解决方案

    前言 想要表格的高度自适应屏幕,保证table能一屏内展示完. elementUI的版本: "element-ui": "^2.14.1", 关键代码: < ...

  7. html移动端表格插件,移动端类table组件封装

    简介 一个不怎么高度自定义的移动端table组件,可创建不定数量的列的table(自己写着玩为了以后维护修改样式方便封装起来的 实现思路表格头部一个循环:循环渲染每一列的列名 表格内容两重循环:外层循 ...

  8. iView Table表格带搜索功能的Table组件

    原文地址声明:https://blog.csdn.net/qq_23179075/article/details/79939244 iview-filter-table 一个基于iView Table ...

  9. vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果

    利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开 效果展示 手风琴效果 版本说明 "vue": "^2.6.11", " ...

最新文章

  1. 线程池运用不当的一次线上事故
  2. 【Python】聊聊Pandas的前世今生
  3. 新装的oracle缺少很多文件夹,丢失所有文件、拥有全备份,缺少后增加的文件
  4. 2021牛客多校7 - xay loves trees(dfs序+主席树-标记永久化)
  5. ie浏览器中 textarea 不能自动换行
  6. 计算机换汉语快捷键,电脑常用快捷键
  7. Java Lock的使用
  8. 关于Vue项目导入谷歌翻译api
  9. 自相关函数与互相关函数
  10. C语音音乐旋律代码-网络神曲
  11. python 画三角形matli_Python实现PS滤镜特效之扇形变换效果示例
  12. 易语言服务器客户端网络验证,超强网络验证系统附远程服务支持库
  13. 电感耦合等离子体质谱法响应时间
  14. Error installing to Instantiated: name=AttachmentStore state=Described
  15. 初步了解FPGA中的HLS
  16. vmware14安装黑苹果max ox x 10.13懒人版教程
  17. ASCII字符和16进制字节数据互转
  18. NVCC Fatal
  19. 简短加密_神经网络训练中回调的简短实用指南
  20. 程序员如何打造薪资15k

热门文章

  1. jquery的一点点认识
  2. ccs 移植创建新工程_CCS新工程创建与配置
  3. 翻译 Windows Server 2016和System Center 2016 技术预览版4 使创新更容易
  4. sap采购申请自动转采购订单_SAP idoc功能够强大: 采购订单修改自动触发销售订单修改...
  5. 如何做好大型数据中心的运维
  6. 2014最不受欢迎10编程语言种
  7. NSIS:强制结束软件进程
  8. python坐标系 向量分量_关于Python中的向量相加和numpy中的向量相加效率对比
  9. java面试题 Arraylist 与 LinkedList比较
  10. perl oracle ppm,Perl图形化包管理工具PPM学习使用笔记