Vue Tables 2 单元格都是轮廓，就像它们是可选的

Question

请帮忙。我使用 Vue Tables 2 已经超过 2 年了，我从来没有遇到过这个问题。我的 table 像往常一样完美显示，但现在每当我单击一个单元格时，它都会被 chrome 上的蓝色轮廓和 firefox 上的虚线轮廓包围。它表现出与我单击输入相同的行为。我一个一个地检查了我的 Vue Tables 2 选项，依次禁用每个选项，但它并没有改变行为。我查看了 bootstrap 4 tables 文档，但找不到与选项相同的行为，所以我相信是 vue tables 正在这样做。 Vue Tables 2 页面上的演示 fiddle 也有此行为。这很让人分心，我正试图让它停下来。

我的目标是让 table 显示它以前的行为，即单击单元格时不执行任何操作。

我正在使用 Bootstrap 4.4 和 Vue-Tables-2 版本 1.6.25

我的选项数组看起来像这样

tableOptions: {
            skin: 'table table-sm table-hover border-0',
            filterable: true,
            pagination: { chunk:4 },
            perPageValues: [],
            perPage: 18,
        dateColumns: ['created_at'],
        dateFormat: 'MM-DD-YYYY',
        toMomentFormat:  'YYYY-MM-DD H:mm:ss',
            texts:{
                filter:"",
                count:"",
                filterPlaceholder:"Search",
                page:"Page:",
                noResults:"No matching records",
                loading:'Loading...',
            },
            columnsClasses: {
                cntCnt: 'text-center noOutline',
                qtCnt: 'text-center noOutline', 
                statusName: 'text-center noOutline',
                created_at: 'text-center ',
            }, 
            headings: { 
                id: 'Ref',
                name: 'Name',
                cntCnt: 'Contacts',
                qtCnt: 'Quotes', 
                statusName: 'Status',
                created_at: 'Created',
                orgSelect: '',
            },
        }

我添加了一张图片来显示发生了什么 on.The 我点击的所有单元格周围都有轮廓，包括列 headers。

Answer 1

这是 CSS 的焦点选择器，其样式正在应用。看这里：https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

您需要覆盖此 CSS 并将边框设置为 none。

您也可以这样做：

:focus { outline: none; }

Vue Tables 2 单元格都是轮廓，就像它们是可选的

Vue Tables 2 cells are all outline, like they are selectable

css

bootstrap-4

vuejs2

vue-tables-2