vue3 a-radio遍历时使用插槽在标题后面添加文字
时间: 2024-09-19 08:10:52 浏览: 31
在Vue3中,`<a-radio>`组件是Ant Design Vue库中的单选按钮组件,如果你想在每个选项的标题后面添加额外的文字,你可以利用`v-slot`或`slot`属性以及插槽机制。`a-radio-group`通常包含一组`a-radio`,你可以为每个`a-radio`定义一个默认的插槽(`.default`),在这个插槽里你可以包含标题和附加的文字。
例如:
```html
<a-radio-group v-model="radioValue" :options="options">
<template slot-scope="{ item }">
<a-radio :label="item.label">
<span>{{ item.label }}<!-- 主要标题 -->{{ item.description || '(附加文字)'}}<!-- 可选的附加文字 -->
</a-radio>
</template>
</a-radio-group>
<script setup>
const options = [
{ label: 'Option 1', description: '这是第一个选项' },
{ label: 'Option 2', description: '这是第二个选项' },
];
let radioValue;
//...
</script>
```
在这里,`item.label`是选项的标题,而`item.description`是附加的文字,如果没有提供,则显示默认的“(附加文字)”。
阅读全文