elementui插槽
Element UI 插槽使用指南
Element UI 提供了丰富的组件插槽（Slots）功能，允许开发者自定义组件内容。插槽分为默认插槽、具名插槽和作用域插槽三种类型。
默认插槽
默认插槽是未命名的插槽，用于替换组件的默认内容。例如在 el-button 组件中，可以通过插槽自定义按钮文本：
<el-button>
<span style="color: red;">自定义按钮文本</span>
</el-button>具名插槽
具名插槽通过 slot 属性指定名称，用于替换组件中特定部分的内容。例如 el-card 组件的标题和内容插槽：
<el-card>
<div slot="header">自定义标题</div>
<div>自定义内容</div>
</el-card>作用域插槽
作用域插槽允许子组件向插槽传递数据，常用于表格、列表等需要动态渲染的场景。例如 el-table 的列插槽：
<el-table :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>常见组件插槽示例
el-dialog 插槽
el-dialog 提供了 title、footer 等具名插槽：
<el-dialog :visible.sync="dialogVisible">
<span slot="title">自定义标题</span>
<div>对话框内容</div>
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
</div>
</el-dialog>el-form 插槽
el-form-item 的 error 插槽可用于自定义错误提示：
<el-form-item prop="name">
<el-input v-model="form.name"></el-input>
<div slot="error" class="custom-error">{{ errors.name }}</div>
</el-form-item>el-pagination 插槽
el-pagination 提供了 prev-text、next-text 等插槽：
<el-pagination
layout="prev, pager, next"
prev-text="上一页"
next-text="下一页">
</el-pagination>注意事项
- Vue 2.6.0+ 版本推荐使用
v-slot语法替代slot和slot-scope。 - 作用域插槽的数据通过
scope对象访问，不同组件可能使用不同属性名（如row、item）。 - 插槽内容的作用域遵循 Vue 的父子组件作用域规则，无法直接访问子组件的数据。
通过合理使用插槽，可以极大增强 Element UI 组件的灵活性和可定制性。
