elementui表格数据未刷新,element table不显示数据
最近在做vue的项目时发现了一个问题。今天，我来解决。本文主要介绍在不更新数据的情况下改变elementUI的表的问题的解决方法。有兴趣的可以去了解一下。
预期效果:点击输入框旁边的图标，输入框变成输入状态；此处输入的可编辑字段不是数据的原始属性，也不是分配数据时已经存在的字段。
问题原因:创建Vue的实例时和数据赋值时没有声明editable，所以不会被Vue转换成响应式属性，自然也不会触发视图的更新。
解决方法：
1.在给数据赋值之前，向数组添加可编辑的属性。
这里就不贴代码了。大致思路是：你得到列表信息后，缓存在一个临时数组中(不能是data中定义的对象)，循环遍历列表信息，给每条数据加上一个属性可编辑值false，然后把处理后的列表信息赋给data。
2.使用：键或v-if
修改绑定到表的键值可以触发表的重新呈现，以便修改后的数据可以在表中更新和呈现。
el-table :data=data :key=num 条带边框
El-table-column align= center label=字段的中文名称
模板槽-范围=“范围”
div style= display:flex；
el-input :disabled=！ scope . row . editable style= margin-right:10px；/el-input
El-button @ click= change edit(scope . row) type= text icon= El-icon-edit-outline /El-button
/div
/模板
/El-表格-列
/el-table
导出默认值{
data(){
返回{
数字：0，
数据：[]
}
},
方法：{
changeEdit(row){
//每点击一次图标键，就会自动增加一个。
row.editable=true
num
}
}
}
这种方法有一个问题：给表格添加一个默认的高度，这个时候，如果数据多了，就会出现滚动条；当滚动条被拉到底部时，点击图标使相应的输入框可编辑，同时触发表格渲染，滚动条会回到顶部。如果要查看操作过的输入框，需要再次将滚动条拉到底部；这种体验很不好。如果有这种情况，建议采用以下方法。
3.使用$set
$set可以动态给数据添加响应式属性，使editable响应式，可以直接触发页面更新。
el-table :data=data 条带边框
El-table-column align= center label=字段的中文名称
模板槽-范围=“范围”
div style= display:flex；
el-input :disabled=！ scope . row . editable style= margin-right:10px；/el-input
el-button @click=changeEdit(范围。$index，scope . row) type= text icon= El-icon-edit-outline /El-button
/div
/模板
/El-表格-列
/el-table
导出默认值{
data(){
返回{
数字：0，
数据：[]
}
},
方法：{
changeEdit(索引，行){
row.editable=true
这个。$set(this.data，index，row)；
}
}
}
根据上面的方法扩展：当vue可以检测到数组的变化时，触发更新。
changeEdit(索引，行){
row.editable=true
this.data.splice(1，0)；
}
关于改变elementUI的表的数据而不进行更新的问题的解决方法，本文到此为止。有关不更新的元素UI表格内容的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。