删除 vuetify 数据表标题上的下拉箭头？

Posted 2023-02-22

【中文标题】删除 vuetify 数据表标题上的下拉箭头？

【英文标题】：Remove dropdown arrow on vuetify data table header?

【发布时间】：2019-03-20 16:48:24

【问题描述】：

我正在努力删除列名称“名称”、“基准”、“创建者”旁边的下拉箭头... 下拉箭头在 i-Tag 中呈现，如果我通过 Chrome 编辑 html 并添加“显示：无”，它将被删除...

但是我无法通过代码中的 css 访问 i 标签或类 v-icon。可能是因为它不是在渲染过程之前创建的。

还有其他方法可以去掉下拉箭头吗？

提前致谢！

我的表格的 Html，称为“文件列表”：

【问题讨论】：

如果您不介意排序，请将sortable: false 添加到您的headers 项目中：headers: [ text: 'ID', value: 'Id', sortable: false , . . . ]

好主意，谢谢！那删除了箭头。但我介意排序:(

请参阅this answer 以了解您无法定位它的原因以及如何实际定位它。

只有在@J.Wu 使用 scoped 样式时才正确

@NatiMask 奇怪的是他们正在使用范围样式，因为 OP 说 however I am unable to access the i tag or the class v-icon via css in the code. Probably because it is not created before the rendering process.，这向我表明他们知道如何通过 CSS 实际定位它，但有些东西不起作用。即使他们没有使用范围样式，也会涵盖其他内容，例如特异性。这应该足以正确定位任何元素。如果有什么不清楚或没有涵盖，欢迎反馈（那里）。

【参考方案1】：

首先，我很确定您可以使用 css 访问此 <i> 图标标签，因为某些元素将被动态创建并不会阻止它受到 css 的影响。

根据specificity 的规则，您的 css 可能会因为 Vuetify css 而被覆盖。我建议首先将class 属性添加到<v-data-table>，以允许您为标签指定css，如下所示：

.my-datatable-class .datatable thead th.column.sortable i 
    display: none;

如果您使用的是作用域样式，则会有所不同，这以及有关 css 特异性的更多信息已涵盖here，感谢@Traxo

另一种选择是自己实现数据表的整个标题部分，Vuetify 允许使用 scoped-slots 来实现这一点，如何做到这一点的例子在examples，看对于 Slot: items and headers 并且在模板代码中你可以看到 <v-icon small>arrow_upward</v-icon> 的东西，只需实现省略它的标题，然后你就不用css了，在你的@中添加类似的东西987654329@:

<template slot="headers" slot-scope="props">
  <tr>
    <th
      v-for="header in props.headers"
      :key="header.text"
      :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
      @click="changeSort(header.value)"
    >
       header.text 
    </th>
  </tr>
</template>

【讨论】：

没有“覆盖”这样的词。它被“覆盖”了。

@GeneC 谢谢。固定。

【参考方案2】：

对必要的列使用可排序选项 false

前-：

headers: [ text: 'Name', value: 'name', sortable: false ,
           text: 'Date', value: 'date', sortable: false ]

【参考方案3】：

隐藏排序图标的最佳方法是通过header-props。例如：

<v-data-table
  :headers="headers"
  :items="items"
  :header-props=" sortIcon: null "
>

【参考方案4】：

不需要编写任何自定义 CSS。可以使用提供的 vuetify 属性

排序图标

将 sort-icon 的值提供为 false 就足够了。它将隐藏所有列的排序图标，我认为这是您所需要的。

<v-data-table
    :headers="headers"
    :items="items"
    :sort-icon="false"
  >

【讨论】：

此方法已被删除。现在你应该使用header-props，如我的回答所示：***.com/a/62027761/1196465

@DavidGay 在我测试过的版本中，它工作正常。它是“bootstrap”：“4.4.1”，“bootstrap-vue”：“2.9.0”。感谢您指出。

别担心，我想你可能已经糊涂了：这个问题是关于 Vuetify (vuetifyjs.com)，而不是 BootstrapVue，它是一个不同的组件框架 (bootstrap-vue.org)。

哦，我的错。我的回答来自 vuetify。但错误地我的评论来自 bootstrap-vue。我与两者一起工作，并在评论中错误地交换了它们。 :D 对于 vuetify，我指的是 1.5.x，它似乎在 vuetify 2 中被删除。