Naive UI 选择器 Select 的:render-label 怎么使用（Vue3 + TS）

项目场景：

在Naive UI 的 选择器 Select组件中 ，如何实现下面的效果 ，在下拉列表中，左边展示色块，右边展示文字。

Naive UI 的官网中提到过这个实现方法，有一个render-label的api，即： 选项标签渲染函数，
但是我个人感觉官网的写法比较晦涩难懂，下面我展示一下比较容易理解的写法

官网：[https://www.naiveui.com/zh-CN/os-theme/components/select#max-tag-count.vue]

解决方案：

1、vue代码

<template><n-select class="flex-1" :to="false" clearable filterable v-model:value="rank" :options="ranks" label-field="name" value-field="name" placeholder="等级选择" :render-label="renderLabel"></n-select></template>

2、js代码

import { NSelect, type SelectOption } from 'naive-ui';//引入模块const rank = ref<string | null>()
const ranks = ref<any[]>([{name: 'AA', color: '#2892C6'}，{name: 'BB', color: '#8DB8A4'}，{name: 'CC', color: '#D7E37D'}，{name: 'DD', color: '#FCCF50'}])
/**
* renderLabel函数 
*///定义了一个名为 renderLabel 的常量函数，
//该函数接受一个类型为 SelectOption 的参数 option。
//SelectOption 类型应该是一个接口或类型别名，定义了选项对象的结构。
//函数返回一个 VNodeChild 类型的值，这是 Vue 中用来表示虚拟节点（VNode）的类型。
const renderLabel = (option: SelectOption): VNodeChild => {
//在函数内部，首先检查 option 对象的 type 属性是否等于字符串 'group'。如果是，那么函数会返回一个虚拟节点，该节点是一个 <span> 元素，其文本内容是 option.name 属性值后跟字符串 (Cool!)。
//这一步的目的是为了处理特定类型的选项，即当选项的类型是 'group' 时，执行特定的渲染逻辑。if (option.type === 'group') {return h('span', `${option.name}(Cool!)`);}// //这里就是我们创建的色块 用来显示色块的 ，你可以使用 h 函数来创建虚拟节点//如果 option 不是分组类型，函数会创建一个名为 colorBlock 的虚拟节点，这是一个 <span> 元素，//用于显示颜色块。h 函数是 Vue 提供的用于创建虚拟节点的函数。//这个 <span> 元素有一个类名 color-block 和一系列内联样式，包括背景颜色 backgroundColor，它是从 option.color 属性获取的。const colorBlock = h('span', {class: 'color-block',style: {backgroundColor: option.color,display: 'inline-block',width: '16px',height: '16px',lineHeight: '16px',marginRight: '8px',verticalAlign: 'middle'}});//这里就是我们创建的文本标签 用来显示文字的//接下来，创建一个名为 name 的虚拟节点，它也是一个 <span> 元素，用于显示选项的名称。这里使用类型断言 as string 来确保 option.name 是一个字符串类型，//这里as string 来确保 option.name 是一个字符串类型的原因主要是在某些情况下，即使变量实际上是字符串类型，TypeScript 编译器可能也无法推断出正确的类型。这可能是因为类型推断的逻辑不够复杂，无法处理特定的代码模式，其次是避免运行时错误 const name = h('span', option.name as string);// 返回包含颜色块和标签的数组return [colorBlock, name];
};