【发布时间】：2020-07-05 18:55:41
【问题描述】：
这是一个 Bootstrap-vue 表的例子：
<template>
<div>
<b-table striped hover :items="items" :fields="fields"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
// Note 'isActive' is left out and will not appear in the rendered table
fields: [
{
key: 'last_name',
sortable: true
},
{
key: 'first_name',
sortable: false
},
{
key: 'age',
label: 'Person age',
sortable: true,
// Variant applies to the whole column, including the header and footer
variant: 'danger'
}
],
items: [
{ isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
]
}
}
}
</script>
如果打开控制台，thead 的元素将如下所示：
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="">
Last Name
<span class="sr-only"> (Click to sort Ascending)</span>
</th>
有什么办法可以去掉
<span class="sr-only"> (Click to sort Ascending)</span>
带有 Bootstrap-vue 属性本身？如果可能的话，我不想在构建后用 JavaScript 删除它。谢谢
【问题讨论】：
-
.sr-only {display: none;}in css 可以为你工作吗？ -
@AlexBrohshtut 它仍然出现在 DOM 树中，但这解决了我的问题！！非常感谢！！
-
为什么要删除它？它是为使用屏幕阅读器的人放置的，因此他们知道该做什么。带有
sr-only的元素具有样式，因此它不会显示给普通用户，但屏幕阅读器仍然可以查看。 -
@Hiws 我正在使用clipboard.js 尝试构建一个可以复制并粘贴到excel 文件中的表格。我发现 sr-only 中的单词也会被复制到其中，我需要将其删除以完成此功能。
-
@EasonLin 有道理。只是想我会让你知道:)
标签： vue.js bootstrap-4 bootstrap-vue