Vue+Vuetify实现选中单选按钮前显示绿色对勾

你可以通过自定义v-radio的标签插槽（label slot）来实现需求，把对勾图标和选项文本整合到一起，仅在选项被选中时显示对勾。修改后的代码如下：

<v-radio-group v-model="gstnRadio">
    <v-radio
        v-for="n in gstnArr"
        color="#A01C40"
        :key="n"
        :value="n"
    >
        <!-- 自定义标签内容 -->
        <template v-slot:label>
            <!-- 选中时显示绿色对勾，添加间距类避免和文本拥挤 -->
            <v-icon v-if="gstnRadio === n" color="green" class="mr-2">check_circle</v-icon>
            <!-- 原选项文本 -->
            {{ n }}
        </template>
    </v-radio>
</v-radio-group>

<!-- 如需保留tooltip，可将其绑定到对勾图标上 -->
<v-tooltip v-if="gstnRadio">
    <template v-slot:activator="{ on }">
        <v-icon v-if="gstnRadio" color="green" v-on="on" class="mr-2">check_circle</v-icon>
    </template>
    已选中此GSTN
</v-tooltip>

关键说明： #

• 用v-slot:label接管单选框的标签渲染逻辑，自由组合图标和文本的布局。
• 通过v-if="gstnRadio === n"判断当前选项是否被选中，仅在选中状态下展示绿色对勾。
• mr-2是Vuetify内置的间距类，用来给对勾和文本之间留出合适的空隙。
• 若需要保留tooltip功能，直接将tooltip的激活器绑定到对勾图标上即可。

内容的提问来源于stack exchange，提问作者Harsh Shukla