naiveui | select下拉选择自定义选项渲染

      <n-select
          v-model:value="selectValue"
          placeholder="请选择数据"
          :options="sourceOption"
          clearable
          filterable
          :render-label="renderReportsLabel"
          :render-option="renderReportsOption"
      />

   import { h, VNode , ref} from 'vue'
   import { SelectRenderLabel, NTag, NTooltip, SelectOption } from 'naive-ui'
   
   
   const selectValue = ref(null)
   
   const sourceOption = ref(
    Array.from({ length: 10 }, (j, i) => {
      return {
        label: `数据${i + 1}`,
        value: i + 1,
        code: `code${i + 1}`,
      }
    })
  )

   
  const renderReportsLabel: SelectRenderLabel = (option: any) =>
    h(
      'div',
      {
        class: 'flex items-center ',
      },
      {
        default: () => [
          h(
            NTag,
            { type: 'primary', size: 'tiny', bordered: false },
            { default: () => option.code.toUpperCase() }
          ),
          h('div', { class: 'truncate w-full ml-2' }, { default: () => option.label }),
        ],
      }
    )

  const renderReportsOption = ({ node, option }: { node: VNode; option: SelectOption }) =>
    h(NTooltip, null, {
      trigger: () => node,
      default: () => option.label,
    })