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