网站首页 > 技术文章 正文
在使用el-table加载数据后,如果通过一些操作更新了el-table绑定的data中的部分数据,想要将更新的数据及时更新在界面上,应该怎么做呢?
假如我们是通过for循环更新了data中某一行某一列的数据,代码如下:
for(var i=0;i<that.tableData.length;i++){
var aId=that.tableData[i].stationid;
var bId=that.tableData[i].deviceid;
if(aId==that.selectStationId&&bId==that.selectDeviceId){
that.tableData[i].physicalid=physicalId;
}
}
上面的代码已经修改了data的部分数据,但是这样新的数据是不能更新在界面上的。<br/>
我们可以新建一个data数组对象,将旧的data修改后的数据一行一行地赋值给新的data数组对象,然后将新的data数组对象
绑定到el-table的data上面就可以将新的数据及时更新在界面上,代码如下:
var newTableData=[];
for(var i=0;i<that.tableData.length;i++){
var aId=that.tableData[i].stationid;
var bId=that.tableData[i].deviceid;
if(aId==that.selectStationId&&bId==that.selectDeviceId){
that.tableData[i].physicalid=physicalId;
}
newTableData.push(that.tableData[i]);
}
that.tableData=newTableData;
猜你喜欢
- 2024-10-17 Vue实战072:CSS样式中的各种深度作用选择器的使用
- 2024-10-17 Vue与Element走过的坑……带上Axios
- 2024-10-17 在Vue开发中出现对话框被遮罩层挡住问题的解决教程
- 2024-10-17 vue里的el-radio怎么监听状态(vue如何监听localstorage)
- 2024-10-17 vue+element 组件el-tab-pane导致router-view加载多次
- 2024-10-17 vue中的select下拉框多选以及多选数据回显
- 2024-10-17 如何让vue+element-ui实现表格checkbox单选
- 2024-10-17 vue+element-ui中的el-table-column使用v-if导致位置错乱
- 2024-10-17 Vue3问题:如何实现el-table内容超出省略提示?第3条很少有人会
- 2024-10-17 Vue封装ajax的代码示例详解(vue 封装 axios)
- 最近发表
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- sqlset (64)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)