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

Question

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

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

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

提前致谢！

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

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

Answer 2

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

前-：

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

Answer 3

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

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

Answer 4

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

排序图标

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

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