如何从此 bootstrap-vue 表中每列的标题中删除（单击以升序排序）文本？答案

【问题标题】：How to remove (Click to sort Ascending) text from header of every column in this bootstrap-vue table?如何从此 bootstrap-vue 表中每列的标题中删除（单击以升序排序）文本？
【发布时间】：2022-07-14 18:37:03
【问题描述】：

我有一个像这样的 bootstrap-vue 表；

这里是代码；

<template>
  <div class="container">
    <h1 class="pt-2 pb-3">Bootstrap Table</h1>    
    <b-table striped hover :items="items" :fields="fields" primary-key></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {      
      "fields": [
        {
          "key": "first_name",
          "label": "My First Name",
          "sortable": true,
        },
        {
          "key": "last_name",
          "label": "My Last Name",
          "sortable": true,
        },
        {
          "key": "age",
          "label": "Age",
          "sortable": true,
          "sortByFormatted": false,           
        },        
      ],
      "items": [
        { "age": -40, "first_name": "Dickerson", "last_name": "Macdonald"},
        { "age": 21, "first_name": "Larsen", "last_name": "Shaw" },
        { "age": 89, "first_name": "Geneva", "last_name": "Wilson" },
        { "age": 38, "first_name": "Jami", "last_name": "Carney" }
      ]
    };
  }
};
</script>

我想删除出现在每列标题中的(Click to sort Ascending) 文本。

我很困惑为什么这段文字没有出现在代码中的任何地方。

我使用的是 v2.6

【问题讨论】：

标签： javascript vue.js vuejs2 bootstrap-vue

【解决方案1】：

将 label-sort-asc、label-sort-desc 和 label-sort-clear 属性设置为空字符串以删除排序标签：

<b-table
 ⋮
 label-sort-asc=""
 label-sort-desc=""
 label-sort-clear=""
></b-table>

demo

【讨论】：

【解决方案2】：

您是否在应用入口点中导入了 Bootstrap CSS 文件？ Bootstrap 使用 .sr-only 类来隐藏该文本并仅在屏幕阅读器上显示。

查看“使用模块捆绑器”部分https://bootstrap-vue.org/docs

【讨论】：

我确实导入了 css 文件。 import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' 也许我的 chrome 浏览器默认表现得像一个屏幕阅读器。
在其他浏览器中的行为相同？
是的。在 Firefox、Chrome、Opera 浏览器上测试。都一样。
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

除了在main.js 中导入bootstrap.cc，你还应该在index.html 中添加bootstrap cdn：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

所以它会隐藏额外的标签，并且还会修复一些其他问题，比如显示 card-group 元素与类 deck 和 ...

【讨论】：