这个的类名是tailwind css的，主要看这里，对应上面的图片
<el-collapse-item name="1" class="relative">
<template #title>
<div class="w-full">
<div @click="handleChangeURL" class="w-[90%] text-left">
{{ titleList[0].cat_name }}
</div>
<div
class="w-[50px] bg-white absolute -right-4 top-0 h-10 z-[99]"
>
<span
class="icon-jian iconfont theme-color"
v-if="menuNumber == 1"
></span>
<span class="icon-jia1 iconfont theme-color" v-else></span>
</div>
</div>
</template>
<div>---------------你的内容--------------------</div>
</el-collapse-item>
我的代码完整的
<el-drawer v-model="visible" :show-close="true" size="100%">
<el-collapse @change="handleChangeMenu" accordion>
<el-collapse-item name="1" class="relative">
<template #title>
<div class="w-full">
<div @click="handleChangeURL" class="w-[90%] text-left">
{{ titleList[0].cat_name }}
</div>
<div
class="w-[50px] bg-white absolute -right-4 top-0 h-10 z-[99]"
>
<span
class="icon-jian iconfont theme-color"
v-if="menuNumber == 1"
></span>
<span class="icon-jia1 iconfont theme-color" v-else></span>
</div>
</div>
</template>
<div>
<div class="overflow-x-auto whitespace-nowrap">
<div
@click="changeGoods(item.id)"
v-for="(item, index) in goodsCategoryList"
:key="index"
class="inline-block px-4 py-1 bg-gray-200 mr-4 rounded-lg"
>
{{ item.cat_name }}
</div>
</div>
</div>
<!-- 图片 -->
<div class="pt-4">
<div class="overflow-x-auto whitespace-nowrap">
<template v-for="(item, index) in goodsList" :key="index">
<div
class="inline-block px-1 py-1 mr-2"
v-if="item.is_new === 0"
>
<NuxtLink :to="`/productName/${item.id}`">
<div class="h-28 w-full">
<NuxtImg
class="h-full w-full object-cover"
:src="`${$config.public.IMAGR_URL}${
JSON.parse(item.images)[0]
}`"
:alt="item.name"
/>
</div>
</NuxtLink>
<p
class="w-40 mt-2 text-center line-clamp-3 theme-text-color text-sm SourceHanSansCN-Normal whitespace-normal"
>
<!-- @click="handleChangeURL" -->
{{ item.name }}
</p>
</div>
</template>
</div>
</div>
</el-collapse-item>
<el-collapse-item name="2" class="relative">
<template #title>
<div class="w-full">
<div @click="handleChangeURL" class="w-[90%] text-left">
{{ titleList[1].cat_name }}
</div>
<div
class="w-[50px] bg-white absolute -right-4 top-0 h-10 z-[99]"
>
<span
class="icon-jian iconfont theme-color"
v-if="menuNumber == 2"
></span>
<span class="icon-jia1 iconfont theme-color" v-else></span>
</div>
</div>
</template>
<div class="overflow-x-auto whitespace-nowrap">
<template v-for="(item, index) in goodsListNew" :key="index">
<div class="inline-block px-1 py-1 mr-2" v-if="item.is_new === 1">
<div class="h-28 w-full">
<NuxtImg
class="h-full w-full object-cover"
:src="`${$config.public.IMAGR_URL}${
JSON.parse(item.images)[0]
}`"
:alt="item.name"
/>
</div>
<p
class="w-40 mt-2 text-center line-clamp-3 theme-text-color text-sm SourceHanSansCN-Normal whitespace-normal"
>
{{ item.name }}
</p>
</div>
</template>
</div>
</el-collapse-item>
<template v-for="(item, index) in titleList" :key="index">
<el-collapse-item :name="index + 2" v-if="index > 1" class="relative">
<template #title>
<div class="w-full">
<div @click="handleChangeURL" class="w-[90%] text-left">
{{ item.cat_name }}
</div>
<div
class="w-[50px] bg-white absolute -right-4 top-0 h-10 z-[99]"
>
<div v-if="item.child.length > 0">
<span
class="icon-jian iconfont theme-color"
v-if="menuNumber == index + 2"
></span>
<span class="icon-jia1 iconfont theme-color" v-else></span>
</div>
</div>
</div>
</template>
<ul v-if="item.child.length > 0">
<li
class="py-1"
v-for="(item1, index1) in item.child"
:key="index1"
@click="handleChangeURL"
>
<NuxtLink to="/about"> {{ item1.cat_name }} </NuxtLink>
</li>
</ul>
</el-collapse-item>
</template>
</el-collapse>
</el-drawer>
标签：Collapse,时才,cat,item,vue3,element,titleList,name From： https://www.cnblogs.com/hechunfeng/p/18097256