Ячейки Vue Tables 2 имеют контур, как будто их можно выбрать.

Пожалуйста помоги. Я использую Vue Tables 2 уже более 2 лет, и у меня никогда не было этой проблемы. Моя таблица отображается как обычно, но теперь всякий раз, когда я нажимаю на ячейку, она окружена синим контуром в хроме и пунктирным контуром в Firefox. Он демонстрирует такое же поведение, как если бы я нажал на ввод. Я просмотрел свои варианты Vue Tables 2 один за другим, отключая каждый по очереди, и это не изменило поведение. Я просмотрел документацию по таблицам bootstrap 4 и не смог найти такое же поведение в качестве опции, поэтому я считаю, что это делают таблицы vue. Демонстрационная скрипта на странице Vue Tables 2 также имеет такое поведение. Это очень отвлекает, и я пытаюсь остановить это.

Моя цель состоит в том, чтобы таблица показывала то же поведение, что и раньше, то есть ничего не делать, когда вы нажимаете на ячейку.

Я использую 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: '',
            },
        }

Я добавил изображение, которое показывает, что происходит. Структура вокруг каждой ячейки, на которую я нажимаю, включая заголовки столбцов.

контур вокруг ячейки таблицы


css vuejs2 bootstrap-4 vue-tables-2
person 7tacos    schedule 17.02.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это селектор фокуса CSS, стиль которого применяется. См. здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

Вам нужно переопределить этот CSS и установить для границы значение none.

Вы также можете сделать это:

:focus { outline: none; }
person Vijay Joshi    schedule 17.02.2020
comment
Спасибо, не думал, что все так просто. Для vue-tables-2 я только что создал стиль .vuetable с фокусом, как вы написали, и прикрепил стиль к опции скина, и он отлично работал. Спасибо - person 7tacos; 17.02.2020