### 如何在
Ant Design Vue 中
使用组件插槽
Ant Design Vue 是一个基于
Vue 的高质量 UI 组件库，提供了丰富的组件支持。通过插槽（Slot），开发者可以灵活地自定义组件内部的内容结构和样式。
#### 插槽的基础概念
Vue 提供了三种类型的插槽：默认插槽、具名插槽和作用域插槽。这些插槽机制同样适用于
Ant Design Vue 的各个组件中[^2]。
---
#### 默认插槽
(Default Slot
)
默认插槽是最简单的形式，用于向组件传递内容。以下是 `a-button` 组件的一个简单例子：
```
vue
<template>
<a-button>
点击按钮
</a-button>
</template>
```
在这个例子中，“点击按钮”作为默认插槽被传入到 `a-button` 组件中。
---
#### 具名插槽
(Named Slot
)
当需要在一个组件的不同位置插入多个内容时，可以
使用具名插槽。例如，在表格
(`a-table`
) 组件中，可以通过具名插槽来自定义表头或操作列的内容。
以下是一个
使用 `a-table` 和具名插槽的例子：
```
vue
<template>
<a-table :columns="columns" :data-source="dataSource">
<!-- 自定义表头 -->
<template #headerCell="{ column }">
<span v-if="column
.key === 'name'" style="color: blue;">
{{ column
.title }}
</span>
</template>
<!-- 自定义单元格内容 -->
<template #bodyCell="{ column, record }">
<div v-if="column
.key === 'action'">
编辑 | 删除
</div>
</template>
</a-table>
</template>
<script lang="ts" setup>
import { ref } from '
vue';
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name'
},
{
title: '年龄',
dataIndex: 'age',
key: 'age'
},
{
title: '操作',
key: 'action'
}
];
const dataSource = ref
([
{ name: '张三', age: 28, key: '1' },
{ name: '李四', age: 30, key: '2' }
]
);
</script>
```
上述代码展示了如何利用具名插槽 `#headerCell` 和 `#bodyCell` 来分别修改表头和单元格中的内容[^1]。
---
#### 作用域插槽
(Scoped Slot
)
作用域插槽允许父组件访问子组件的数据并对其进行处理。这通常用于动态生成列表项或其他复杂场景。
下面是一个关于 `a-select` 组件的作用域插槽示例：
```
vue
<template>
<a-select v-model:value="value" style="width: 120px">
<template #dropdownRender="{ menuNode }">
<ul class="custom-dropdown-menu">
<li v-for="
(item, index
) in options" :key="index">{{ item
.label }}</li>
</ul>
</template>
</a-select>
</template>
<script lang="ts" setup>
import { ref } from '
vue';
const value = ref
(''
);
const options = [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' }
];
</script>
```
在此示例中，`#dropdownRender` 被用来完全替换下拉菜单的默认渲染逻辑，并提供了一个更自定义的布局。
---
#### 实际应用场景
以级联选择器
(`cascader`
) 为例，其内部实现了复杂的嵌套数据展示功能。如果想要进一步增强用户体验，则可通过插槽实现个性化设计。比如，可以在选中某一项后显示额外的信息面板[^3]。
```
vue
<template>
<a-cascader
v-model:value="selectedValue"
:options="options"
expand-trigger="hover"
>
<template #suffixIcon>
<icon-custom />
</template>
</a-cascader>
</template>
<script lang="ts" setup>
import IconCustom from '
./components/IconCustom
.vue';
import { ref } from '
vue';
const selectedValue = ref
([]
);
const options = [
{
value: 'zhejiang',
label: '浙江',
children: [
{
value: 'hangzhou',
label: '杭州'
}
]
}
];
</script>
```
此案例说明了如何借助 `#suffixIcon` 替换默认
图标，从而提升界面美观度。
---
#### 总结
以上介绍了
Ant Design Vue 中插槽的主要用法及其实际应用方式。无论是基础的按钮还是高级的功能型组件，都可以通过合理运用插槽达到更高的定制化水平。
---
扫一扫
3348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
