elementui slot

ElementUI 中的 Slot 用法

ElementUI 提供了丰富的 slot（插槽） 机制，允许在组件内部插入自定义内容，增强组件的灵活性。以下是常见的使用场景和示例。

默认插槽

许多组件支持默认插槽，用于替换组件内部的默认内容。

<el-button>
  <span>自定义按钮内容</span>
</el-button>

具名插槽

部分组件提供具名插槽，允许在特定位置插入内容。

<el-card>
  <template #header>
    <div>自定义卡片标题</div>
  </template>
  <p>卡片内容</p>
</el-card>

作用域插槽

某些组件（如 el-table）支持作用域插槽，可以访问组件内部的数据。

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template #default="{ row }">
      <el-tag>{{ row.name }}</el-tag>
    </template>
  </el-table-column>
</el-table>

常见组件的 Slot 示例

el-dialog 插槽

<el-dialog title="提示">
  <template #footer>
    <el-button @click="closeDialog">取消</el-button>
    <el-button type="primary" @click="confirmDialog">确定</el-button>
  </template>
</el-dialog>

el-menu 插槽

<el-menu>
  <el-menu-item index="1">
    <template #title>
      <span>自定义菜单项</span>
    </template>
  </el-menu-item>
</el-menu>

el-upload 插槽

<el-upload action="/upload">
  <template #trigger>
    <el-button>上传文件</el-button>
  </template>
</el-upload>

总结

• 默认插槽：直接替换组件默认内容。
• 具名插槽：通过 #slotName 或 v-slot:slotName 在特定位置插入内容。
• 作用域插槽：访问组件内部数据，适用于表格、列表等动态渲染场景。

合理使用插槽可以大幅提升组件的可定制性，满足不同的业务需求。