如何编辑可选 b 表的样式

Question

当您单击 b-table 行时，当 b-table 可选择打开时，我很难弄清楚 b-table 如何添加粗边框。

//someidea component
<template>
    <b-table striped hover
             :items="ideas"
             :fields="ideaFields"
             @row-clicked="markRead" //this turns on selectable by default.
             ref="table">
    </b-table>
</template>

<script>
    export default {
        name: 'someidea',
        data()
        {
            return {
                ideas: [{
                    title: 'Some idea',
                    description: 'Some description',
                    _rowVariant: 'warning',
                }],
                ideaFields: [
                    {
                        key: 'title',
                        sortable: false,
                    },
                    {
                        key: 'description',
                        sortable: false,
                    }
                ],
            }
        },
        mounted()
        {

        },
        methods: {
            markRead(record, data, datax)
            {
                record._rowVariant = '';
            },
        },
    }
</script>

点击前

点击后

现在，当您单击该行时，它会清空 _rowVariant，如预期的那样将其从黄色 bg 更改为白色 bg。行获得焦点的粗边框的问题（不知道它是否真的是焦点但无法更好地描述它）。我已经在 chrome 和 firefox 中检查了检查器（都是最近更新的），我没有看到焦点行有任何变化，但它确实得到了边框，所以我不确定他们是如何应用它的。

一个基于b-table documentation的重要旁注（第一个示例表）：

b-table 支持以编程方式选择和取消选择选定的行。遗憾的是，这不适用于我的情况。点击的行并没有真正被选中，更像是聚焦的。如果您在文档中的行上单击两次（再次是第一个表），您会看到它被取消选择但仍然有边框。

我也试过了（没有成功）：

tr:focus {
    border: none !important;
}

我希望任何人都可以帮助我解决这个问题，因为即使有一个丑陋的边框并不是世界末日，它让我很烦恼，我无法找到如何应用这种样式。

提前致谢。

Answer 1

解决方案

将border 更改为outline，如下所示：

tr:focus {
  outline: none;
}

你也可以这样做：

tr:focus {
  outline: 0;
}

outline 属性默认由:focus 样式使用。 outline 的目的是让元素脱颖而出。 outline 在边框周围绘制。

---

outline和border的区别

• 轮廓不是盒子模型的一部分。
• 轮廓不会改变元素的大小或位置。
• 轮廓不能将每个边缘设置为不同的宽度，或设置不同的 每个边缘的颜色和样式。轮廓在所有方面都是相同的 （所有边的颜色、宽度和样式必须一致）。
• 轮廓不占用空间，它们放置在元素的顶部 （轮廓不干扰元素本身或其他元素 周围）。
• 轮廓不能是圆形的。