学习vue3——element插槽

一、具名插槽、默认插槽、插槽传值

name 命名，#接收

插槽默认name 是default

插槽内容必须要 template 标签包裹

 

二、实例

input 带有前缀图标

1 <el-input 
2           class="inputClass"  
3           v-model="form.name"   
4           ref="name"        
5           placeholder="请输入用户名"
6           clearable     
7         >
8         <template #prefix><el-icon ><UserFilled /></el-icon></template>
9 </el-input>

 

循环图标

后端传过来的图标，需要前端循环展示

 1 <el-tree
 2             style="max-width: 600px"
 3             :data="data"
 4             :props="{ label:'name',children:'child' }"
 5             
 6         >
 7             <template #default="{ node, data }">
 8                 <div class="custom-tree-node">
 9                     <el-tag size="small" :type="data.menu ? '' : 'info'">{{ data.menu ? "菜单" : "权限" }}</el-tag>
10                     <el-icon v-if="data.icon" :size="16" class="ml-2">
11                         <component :is="data.icon" />
12                     </el-icon>
13                     <span>{{ data.name }}</span>
14 
15                     <div class="ml-auto">
16                         <el-switch :modelValue="status" :active-value="1" :inactive-value="0"/>
17                         <el-button text type="primary" size="small">修改</el-button>
18                         <el-button text type="primary" size="small">增加</el-button>
19                         <el-button text type="primary" size="small">删除</el-button>
20                     </div>
21 
22                 </div>
23         </template>
24        </el-tree>

提要

<el-icon v-if="data.icon" :size="16" class="ml-2">
     <component :is="data.icon" />
</el-icon>

’ 编辑‘ 的插槽

 

posted @ 2024-08-26 10:16  东方不败--Never  阅读(238)  评论(0)    收藏  举报