如何为Quasar框架的q-select组件选项添加标题？

Quasar的q-select组件本身没有内置的选项标题配置，但可以通过自定义插槽实现需求，下面分两种场景给出具体实现方式：

单个选项添加独立标题 #

如果需要给每个选项单独设置标题，可使用option插槽自定义选项结构，在选项内容上方添加标题元素：

<q-select
  v-model="selected"
  :options="options"
  label="带独立标题的选择器"
>
  <!-- 自定义选项模板 -->
  <template v-slot:option="scope">
    <div class="q-pa-xs">
      <!-- 标题部分 -->
      <div class="text-subtitle2 font-weight-bold">{{ scope.opt.title }}</div>
      <!-- 选项内容 -->
      <div class="text-body1">{{ scope.opt.label }}</div>
    </div>
  </template>
</q-select>

<script setup>
import { ref } from 'vue'

const selected = ref(null)
// 自定义选项数据，新增title字段存储标题
const options = ref([
  {
    label: '基础功能配置',
    value: 'config-basic',
    title: '系统设置'
  },
  {
    label: '用户权限管理',
    value: 'auth-user',
    title: '权限模块'
  }
])
</script>

分组选项添加组标题 #

如果需要给一组选项添加统一标题，可使用group-options属性配合group插槽实现分组标题：

<q-select
  v-model="selectedGroup"
  :group-options="groupedOptions"
  label="分组带标题的选择器"
>
  <!-- 自定义分组标题模板 -->
  <template v-slot:group="scope">
    <div class="text-subtitle1 font-weight-bold q-py-xs q-px-sm text-primary">
      {{ scope.group.label }}
    </div>
  </template>
  <!-- 自定义选项模板 -->
  <template v-slot:option="scope">
    <div class="q-pa-xs">{{ scope.opt.label }}</div>
  </template>
</q-select>

<script setup>
import { ref } from 'vue'

const selectedGroup = ref(null)
// 分组格式的选项数据
const groupedOptions = ref([
  {
    label: '系统设置',
    options: [
      { label: '基础配置', value: 'sys-basic' },
      { label: '日志管理', value: 'sys-log' }
    ]
  },
  {
    label: '权限模块',
    options: [
      { label: '用户管理', value: 'auth-user' },
      { label: '角色配置', value: 'auth-role' }
    ]
  }
])
</script>

补充说明 #

你可以根据需求调整标题的样式（颜色、字体大小、边距等），Quasar的内置CSS类（如text-subtitle2、font-weight-bold）可快速实现统一的UI风格。

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