如何从 bootstrap-vue table 中每一列的 header 中删除（点击按升序排序）文本？

Question

我有一个 bootstrap-vue table 看起来像这样；

这是代码；

<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>

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

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

我正在使用 vue v2.6

Answer 1

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

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

Answer 2

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

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

demo

如何从 bootstrap-vue table 中每一列的 header 中删除（点击按升序排序）文本？

How to remove (Click to sort Ascending) text from header of every column in this bootstrap-vue table?

javascript

vue.js

vuejs2

bootstrap-vue