HTML表格数据动态更新,el-table的数据源:data="tableData"动态改变，表格如何实时刷新...

最新推荐文章于 2024-08-15 23:24:24 发布

weixin_39868959

最新推荐文章于 2024-08-15 23:24:24 发布

阅读量3.7k

点赞数

文章标签： HTML表格数据动态更新

本文探讨了在Vue项目中，当HTML表格数据动态更新时，如何确保el-table组件根据数据源的变化实时刷新。通过示例代码展示了在表格列中使用el-checkbox时，如何监听和处理change事件，以及尝试使用v-model实现数据同步，但遇到了预期效果不符的问题。

摘要由CSDN通过智能技术生成

问题描述

现在有一个需求，前端动态修改表格中的一些数据，希望数据源变化的同时，表格也可以实时刷新状态。

请问有遇到这种需求并且有方法解决的吗？

补充：

再把场景问题说的再具体点，我现在需要在table中

<el-table-column

label="设置标签"

align="center">

<el-checkbox :checked="scope.row.restaurantTagTypes[0].checked" @change = "changeStatus1(scope.$index, scope.row)">{ {scope.row.restaurantTagTypes[0].restaurantTagText}}</el-checkbox>

<el-checkbox :checked="scope.row.restaurantTagTypes[1].checked" @change = "changeStatus2(scope.$index, scope.row)">{ {scope.row.restaurantTagTypes[1].restaurantTagText}}</el-checkbox>

</template>

</el-table-column>

实现方法

changeStatus1(index, row) {

console.log('