html表格内容自动更新,ElementUI table 组件展开 expand,动态更新数据时,视图没有自动更新...
这是因为在给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,动态更新数据时,视图没有自动更新...相关推荐
- elementui table组件和popover实现表格列内容过长,显示隐藏多余字段,hover显示所有内容;无内容或则内容少则不显示popover
elementui table组件和popover实现表格列内容过长,显示隐藏多余字段,hover显示所有内容:无内容或则内容少则不显示popover 1.场景效果 2.实现 3.进阶版 1.场景效果 ...
- ElementUI table组件,表格组件,单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
- element-ui table 指定单元格动态字体颜色设置
element-ui table 指定单元格动态字体颜色设置 根据后端返回的值,动态的自动变更element-ui table 指定单元格的字体的颜色或者整行的颜色值 一.指定单元格突出显示颜色,如: ...
- oracle更新数据没反应,ORACLE更新数据时如果有就更新没有就插入
SQL写法: begin update table_name set salary = 10000 where emp_id = 5; if sql%notfound then insert into ...
- 如何解决mui-scroll-wrapper组件在动态获取数据时滚动或者滑动失效的问题(亲测有效)
第一次些博客,如果有写的不好的地方,请见谅!! ##由于需要使用MUI制作公司的一个APP,因此跟着MUI官方帮助文档进行了代码的测试,大部分组建都能够达到想要的效果,但是在测试popover+scr ...
- element-ui table组件如何高度自适应、el-table的x、y轴都出现滚动条右下角会出现一个小白块 解决方案
前言 想要表格的高度自适应屏幕,保证table能一屏内展示完. elementUI的版本: "element-ui": "^2.14.1", 关键代码: < ...
- html移动端表格插件,移动端类table组件封装
简介 一个不怎么高度自定义的移动端table组件,可创建不定数量的列的table(自己写着玩为了以后维护修改样式方便封装起来的 实现思路表格头部一个循环:循环渲染每一列的列名 表格内容两重循环:外层循 ...
- iView Table表格带搜索功能的Table组件
原文地址声明:https://blog.csdn.net/qq_23179075/article/details/79939244 iview-filter-table 一个基于iView Table ...
- vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开 效果展示 手风琴效果 版本说明 "vue": "^2.6.11", " ...
最新文章
- 线程池运用不当的一次线上事故
- 【Python】聊聊Pandas的前世今生
- 新装的oracle缺少很多文件夹,丢失所有文件、拥有全备份,缺少后增加的文件
- 2021牛客多校7 - xay loves trees(dfs序+主席树-标记永久化)
- ie浏览器中 textarea 不能自动换行
- 计算机换汉语快捷键,电脑常用快捷键
- Java Lock的使用
- 关于Vue项目导入谷歌翻译api
- 自相关函数与互相关函数
- C语音音乐旋律代码-网络神曲
- python 画三角形matli_Python实现PS滤镜特效之扇形变换效果示例
- 易语言服务器客户端网络验证,超强网络验证系统附远程服务支持库
- 电感耦合等离子体质谱法响应时间
- Error installing to Instantiated: name=AttachmentStore state=Described
- 初步了解FPGA中的HLS
- vmware14安装黑苹果max ox x 10.13懒人版教程
- ASCII字符和16进制字节数据互转
- NVCC Fatal
- 简短加密_神经网络训练中回调的简短实用指南
- 程序员如何打造薪资15k
热门文章
- jquery的一点点认识
- ccs 移植创建新工程_CCS新工程创建与配置
- 翻译 Windows Server 2016和System Center 2016 技术预览版4 使创新更容易
- sap采购申请自动转采购订单_SAP idoc功能够强大: 采购订单修改自动触发销售订单修改...
- 如何做好大型数据中心的运维
- 2014最不受欢迎10编程语言种
- NSIS:强制结束软件进程
- python坐标系 向量分量_关于Python中的向量相加和numpy中的向量相加效率对比
- java面试题 Arraylist 与 LinkedList比较
- perl oracle ppm,Perl图形化包管理工具PPM学习使用笔记