vue怎么封装table组件(vue和el-table使用经验-如何刷新表格数据)

在使用el-table加载数据后,如果通过一些操作更新了el-table绑定的data中的部分数据,想要将更新的数据及时更新在界面上,应该怎么做呢?,下面我们就来聊聊关于vue怎么封装table组件?接下来我们就一起去了解一下吧!

vue怎么封装table组件(vue和el-table使用经验-如何刷新表格数据)

vue怎么封装table组件

在使用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;

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页