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

Question

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

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

还有其他方法可以删除下拉箭头吗？

谢谢！

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

Answer 1

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

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

Answer 2

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

sort-icon

提供sort-icon的值为false就足够了。它将隐藏所有列的排序图标，正如我所需要的那样。

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

Answer 3

首先，我非常确定您可以使用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

Anoter选项是由您自己实现数据表的整个标头部分，Vuetify允许使用 scoped-slots 示例来实现这一点，该示例在examples中进行说明，找到 Slot：项目和标题，然后在模板代码上您可以看到<v-icon small>arrow_upward</v-icon>，只需实现省略标题的标题，然后就不用CSS了，添加类似放入您的<v-data-table>：

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

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

例如：

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