为 v-combobox vuetify 创建插槽

Question

我有一个组件，我想为 v-combobox 创建一个插槽，因为我想将下拉项显示为自定义样式部分，

      <v-combobox
            v-model="select"
            v-model:search="search"
            :items='companyList'
            item-title='company_name'
            item-value='id'
            density="compact"
            label="start chat with related companies"
            variant="outlined"
            bg-color='navbar'
            hide-details
            single-line
            @input="startConversation"
          >
            <template #item="{ index, props, item }">
              <v-list-item v-bind="props" :key="index" @click="createRoom(item)">
                <div class='flex flex-col gap-y-1'>
                  <!-- Company Name -->
                  <span>{{ item.company_name }}</span>

                  <!-- Staff Names (Name and Last Name) -->
                  <div v-if="item.staff && item.staff.length">
          <span v-for="(staffMember, i) in item.staff" :key="i">
            {{ staffMember.name }} {{ staffMember.last_name }}
          </span>
                  </div>
                  <!-- Fallback if no staff -->
                  <div v-else>
                    <span>No staff available</span>
                  </div>
                </div>
              </v-list-item>
            </template>
          </v-combobox>

当我在 v-combobox 中搜索时，我想在下拉列表中将插槽显示为自定义模板，我的数据如下：

[
    {
        "id": 2,
        "company_name": "company name",
        "staff": [
            {
                "id": 1,
                "name": "name1",
                "last_name": "lastname1",
                "email": "[email protected]",
                "avatar": "https://test.com",
                "position": "ceo",
                "languages": [],
                "phone_number": ""
            },
            {
                "id": 2,
                "name": "name2",
                "last_name": "lastname2",
                "email": "[email protected]",
                "avatar": "https://test.com",
                "position": "ceo",
                "languages": [],
                "phone_number": ""
            },
            {
                "id": 3,
                "name": "name3",
                "last_name": "lastname3",
                "email": "[email protected]",
                "avatar": "https://test.com",
                "position": "ceo",
                "languages": [],
                "phone_number": ""
            }
        ],
        "logo": "logo address"
    }
]

如何在下拉列表中显示该公司名称的每个位置？

在下拉菜单中想象一下：

每条线的公司名称和头像都相似，但每条线下的员工姓名和姓氏应该不同， 我使用了我的代码，我只看到公司名称，我如何才能呈现员工姓名和姓氏？

Answer 1

经过大量时间处理数据，我终于找到了它：

 <v-combobox
            v-model="select"
            v-model:search="search"
            :items="combinedCompanyStaffList"
            item-title="displayText"
            item-value="staffId"
            density="compact"
            label="Start chat withs"
            variant="outlined"
            bg-color="navbar"
            hide-details
            single-line
            @input="startConversation"
          >
            <template #item="{ index, props, item }">
              <v-list-item v-bind="props" :key="index" @click="createRoom(item)">
                <div class='flex flex-col gap-y-1'>
                  <!-- Staff Name -->
                  <span class='text-sm text-gray-100'>{{ item.staffName }}</span>
                  <!-- Company Name -->
                  <span class='text-sm text-gray-100'>{{ item.companyName }}</span>
                </div>
              </v-list-item>
            </template>
          </v-combobox>

我将数据作为计算属性并更改了数据的形状：

const combinedCompanyStaffList = computed(() => {
  return companyList.value.flatMap(company =>
    company.staff.map(staffMember => ({
      staffId: staffMember.id, // Unique staff ID
      staffName: `${staffMember.name} ${staffMember.last_name}`, // Full staff name
      companyName: company.company_name, // Company name
      displayText: `${staffMember.name} ${staffMember.last_name} - ${company.company_name}`, // Text to display in combobox
      logo: company.logo
    }))
  );
});

不，我有数据可以在 v-combobox 中制作自定义插槽