Bootstrap-vue table _showdetails 在数据更新时关闭

Posted

技术标签:

【中文标题】Bootstrap-vue table _showdetails 在数据更新时关闭【英文标题】:Bootstrap-vue table _showdetails closes when data is updated 【发布时间】:2019-10-28 00:48:33 【问题描述】:

我有一个 bootstrap-vue 表,它绑定到一个计算属性,该属性从我的 vuex 存储中获取一些数据。

每一行都有一个 show_details 按钮,根据此链接打开第二行: https://bootstrap-vue.js.org/docs/components/table/#row-details-support

但是,当我的 vuex 存储中的数据发生变化时,表格会重新渲染并失去其状态(所有打开的“show_details”行都返回关闭状态)。

有什么方法可以更新store和table中的table数据,而不丢失table的当前状态?

【问题讨论】:

【参考方案1】:

一旦从后端接收到新数据,在更新存储之前,您可以循环遍历旧表项数组以查找 _showDetails 属性,然后更新新数据数组设置 _showDetails 如果行是相同的(例如通过使用主键或其他唯一行标识符来关联行)。然后使用新数据更新您的商店商品数组。

【讨论】:

以上是关于Bootstrap-vue table _showdetails 在数据更新时关闭的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Bootstrap-Vue Table 组件中呈现自定义数据?

bootstrap-vue 表点击操作

bootstrap-vue table td 元素样式

b-table 中的复选框的 bootstrap-vue 问题

Bootstrap-vue b-table:如何为非活动行设置 css-Class?

在 Bootstrap-Vue 中按列对 <b-table> 进行排序并禁止用户排序