项目中遇到的问题分析_element plus checkbox不显示label-优快云博客

文章介绍了如何在Vue3中使用高阶组件结合router-view实现动态组件加载，同时展示了利用`object-fit:contain`实现图片等比例缩放的方法。另外，文中还提及了ElementPlus中Checkbox不显示标签问题的解决策略以及在模板中使用`v-if`根据插槽内容决定元素是否显示的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

高阶组件

Component 在 router 变化的时候自动会给 router-view 把对应的组件传进来，v-slot 做为传输入口，把组件传进来，用 component :is 来动态化显示对应组件

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <transition name="zoom-fade" modetransition="out-in" appear>
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

那组件本身在哪引入的？

const route = {
  path: '/workbench',
  name: '工作台',
  meta: {
    icon: 'gongzuotai',
    title: '工作台'
  },
  component: () => import('@/views/workbench/index.vue'),
}

图片等比例缩放 `object-fit: contain;`

.mc_list li .mc_img {    //容器
    height: 214px;
    background: #F3F4F5;
    }
 img{
    width: 100%;
    height: 100%;
    object-fit: contain;   图片等比例缩放
    }

element plus中的checkbox不显示lable的文字，

用 <br/>

  <el-checkbox-group
   v-model="checkedAdmins"
         @change="handleCheckedCitiesChange"
    >
     <el-checkbox :key="item.Id" :label="item.Id">
            <br/>
         </el-checkbox>
    </el-checkbox-group>

vue3中 solt 有些不需要显示用 `v-if="$slots.XXX"`

<div class="m_add" v-if="$slots.addList">
     <em class="iconfont icon-jiahao"></em>
            <slot name="addList">
                添加栏目
            </slot>
        </div>