Bootstrap Table行选中后子模态框隔次点击数据为空问题

你当前的代码同时监听了b-table的row-selected和row-clicked事件，在单选模式下：

• 第一次点击行：row-selected触发，selectedRows赋值为选中行数据，接着row-clicked触发打开模态框，正常显示。
• 关闭模态框后再次点击同一行：row-selected先触发，由于单选模式下再次点击已选中行会取消选择，selectedRows被设为空数组，随后row-clicked触发打开模态框，此时selectedRows为空，所以模态框无数据。
• 第三次点击同一行：row-selected再次选中该行，selectedRows有数据，row-clicked打开模态框显示正常；第四次点击又会重复取消选择的逻辑，导致数据为空。

直接移除row-clicked事件监听，把打开模态框的逻辑合并到row-selected方法中，只有当有选中行时才打开模态框：

修改父组件代码 #

1. 移除b-table的@row-clicked="showModal"属性 #

修改后的b-table标签：

<b-table
  :items="completedTasks"
  :fields="fields"
  :per-page="[10, 25, 50]"
  selectable
  :select-mode="'single'"
  @row-selected="onRowSelected"
  include-actions
  sort-desc
/>

2. 更新onRowSelected方法 #

判断选中的行数据是否存在，存在才打开模态框：

onRowSelected(fields){
  this.selectedRows = fields
  // 只有选中行时才打开模态框
  if (fields.length > 0) {
    this.$refs.errorLogEntryModal.show()
  }
},

3. 可删除showModal方法（已不再需要） #

可选优化：避免重复打开模态框 #

如果担心重复点击已选中行时触发多次模态框，可以在打开前判断模态框是否已显示：

onRowSelected(fields){
  this.selectedRows = fields
  if (fields.length > 0 && !this.$refs.errorLogEntryModal.showModal) {
    this.$refs.errorLogEntryModal.show()
  }
},

修改后，点击行时会先触发选中并赋值，然后打开模态框；关闭模态框后再次点击同一行，会先取消选中（selectedRows为空），但不会打开模态框，再次点击才会重新选中并打开，符合预期逻辑。

内容的提问来源于stack exchange，提问作者Cphml444