我之前也碰到过这个坑，这其实是Bootstrap Vue为了保障可访问性设计的默认行为——当你点击行时，行内会有一个隐藏的可聚焦元素自动获得焦点，你看到的"粗边框"就是这个元素的聚焦样式，而非<tr>本身的边框，所以直接写tr:focus { border: none !important; }自然不会生效。

下面给你几个可行的解决方案，按需选择：

方法一：用CSS覆盖聚焦样式（最推荐） #

直接针对包含聚焦元素的行，覆盖掉默认的聚焦轮廓/阴影样式。如果你的组件样式是scoped的，需要用::v-deep（Vue 3）或者/deep/（Vue 2）来穿透样式隔离：

<style scoped>
::v-deep .b-table tbody tr:focus-within {
  /* 移除默认的聚焦轮廓和阴影 */
  outline: none;
  box-shadow: none;
}
</style>

如果这个不生效，也可以直接针对行内的聚焦元素：

::v-deep .b-table .table-row-focus {
  outline: none;
}

方法二：点击后手动移除焦点 #

在你的markRead方法里，找到行内的聚焦元素并调用blur()，手动取消焦点状态：

methods: {
  markRead(record, row, event) {
    record._rowVariant = '';
    // 定位到行内的可聚焦元素并移除焦点
    const focusEl = event.currentTarget.querySelector('[tabindex]');
    if (focusEl) {
      focusEl.blur();
    }
  },
}

方法三：禁用行的可聚焦性（不推荐） #

如果你的场景完全不需要考虑键盘导航等可访问性需求，可以通过自定义行模板来禁用行的聚焦能力：

<template>
  <b-table striped hover :items="ideas" :fields="ideaFields" @row-clicked="markRead">
    <!-- 自定义单元格模板，设置tabindex="-1"禁用聚焦 -->
    <template #cell(*)="data">
      <div tabindex="-1">{{ data.value }}</div>
    </template>
  </b-table>
</template>

⚠️ 注意：这个方法会破坏键盘导航的可访问性，除非你有特殊需求，否则优先选前两种方法。

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