如何为Quasar q-table的列排序图标添加aria-label属性？

不用重写整个q-table组件，以下两种方式可实现需求：

方法一：使用header-cell自定义插槽（推荐，稳定可控） #

通过q-table内置的header-cell插槽自定义表头单元格内容，直接给排序图标绑定aria-label，同时关联排序状态：

1. 组件模板代码 #

<template>
  <q-table
    :columns="columns"
    :rows="tableRows"
    :sort-by="sortBy"
    :sort-desc="sortDesc"
    @update:sort-by="sortBy = $event"
    @update:sort-desc="sortDesc = $event"
  >
    <!-- 自定义表头单元格 -->
    <template #header-cell="{ col, sortBy, sortDesc }">
      <div class="row items-center cursor-pointer" @click="toggleSort(col.name)">
        {{ col.label }}
        <!-- 带aria-label的排序图标 -->
        <q-icon
          v-if="col.sortable"
          :name="sortBy === col.name ? (sortDesc ? 'arrow_down' : 'arrow_up') : 'unfold_more'"
          :aria-label="getSortAriaText(col.label, sortBy === col.name, sortDesc)"
          class="ml-2"
        />
      </div>
    </template>
  </q-table>
</template>

2. 脚本逻辑代码 #

export default {
  data() {
    return {
      columns: [
        { name: 'name', label: '姓名', sortable: true },
        { name: 'age', label: '年龄', sortable: true },
        { name: 'email', label: '邮箱', sortable: false }
      ],
      tableRows: [/* 你的表格数据 */],
      sortBy: '',
      sortDesc: false
    }
  },
  methods: {
    toggleSort(colName) {
      if (this.sortBy === colName) {
        this.sortDesc = !this.sortDesc
      } else {
        this.sortBy = colName
        this.sortDesc = false
      }
    },
    getSortAriaText(colLabel, isActive, isDesc) {
      if (!isActive) {
        return `点击按${colLabel}排序`
      }
      return isDesc 
        ? `当前按${colLabel}降序排序，点击切换为升序` 
        : `当前按${colLabel}升序排序，点击切换为降序`
    }
  }
}

这种方式基于Quasar官方API实现，不受DOM结构变更影响，可自由定制图标样式和aria-label文案。

方法二：全局自定义指令（快速批量处理） #

如果不想逐个列自定义插槽，可以通过自定义指令遍历表格的排序图标，自动添加/更新aria-label：

1. 注册全局指令 #

// 在main.js或全局指令文件中
import Vue from 'vue'

Vue.directive('sort-aria', {
  inserted(el) {
    this.updateAriaLabels(el)
  },
  update(el) {
    // 排序状态变化时延迟更新，确保DOM已渲染完成
    setTimeout(() => this.updateAriaLabels(el), 0)
  },
  updateAriaLabels(el) {
    const sortIcons = el.querySelectorAll('.q-table__sort-icon')
    sortIcons.forEach(icon => {
      const headerCell = icon.closest('.q-table__th')
      const colLabel = headerCell.textContent.trim().replace(/\s+$/, '')
      let ariaText = `点击按${colLabel}排序`

      // 根据图标样式判断当前排序状态
      if (icon.classList.contains('q-icon--rotate-180')) {
        ariaText = `当前按${colLabel}降序排序，点击切换为升序`
      } else if (icon.classList.contains('q-table__sort-icon--active')) {
        ariaText = `当前按${colLabel}升序排序，点击切换为降序`
      }

      icon.setAttribute('aria-label', ariaText)
    })
  }
})

2. 在q-table上使用指令 #

<q-table v-sort-aria :columns="columns" :rows="tableRows" ... />

注意：这种方法依赖Quasar的DOM类名（如q-table__sort-icon），若Quasar版本更新修改了类名，需要同步调整指令中的选择器。

内容的提问来源于stack exchange，提问作者MrDucky