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,
    })

__EOF__

本文作者：杨芋可可
本文链接：https://www.cnblogs.com/yangyukeke/p/17671336.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！