Naive UI 多选框自定义tag和label

 Naive UI 的多选框可使用render-label和render-tag自定义下拉框的样式和选中后标签的样式。具体代码如下：

<script setup lang="ts">
    import { CascaderOption, NCheckbox, SelectRenderLabel, SelectRenderTag } from 'naive-ui'

    const renderLabel: SelectRenderLabel = (option: any, selected: Boolean) =>
    h(
        'div',null,{
            default: () => [
                h(
                    NCheckbox,
                    { value: option.value as string, label: option.label as string, checked: selected},
                    { default: () => option.value }
                ),
            ],
        }
    )
    const renderTag: SelectRenderTag = ({ option, handleClose }) => 
    h(
        NTag,
        {
            class: 'multiple-tag',
            closable: true,
            bordered: false,
            onMousedown: (e: FocusEvent) => {
                e.preventDefault()
            },
            onClose: (e: MouseEvent) => {
                e.stopPropagation()
                handleClose()
            }
        },
        { default: () => option.label }
    )
    
    const handleUpdateValue = (value: string, option: CascaderOption) => {
        console.log(value, option)
    }

    const selectOptions = ref([
        {
          label: "Everybody's Got Something to Hide Except Me and My Monkey",
          value: 'song0',
        },
        {
          label: 'Drive My Car',
          value: 'song1'
        },
        {
          label: 'Norwegian Wood',
          value: 'song2'
        },
        {
          label: "You Won't See",
          value: 'song3',
        },
        {
          label: 'Nowhere Man',
          value: 'song4'
        },
        {
          label: 'Think For Yourself',
          value: 'song5'
        },
        {
          label: 'The Word',
          value: 'song6'
        },
        {
          label: 'Michelle',
          value: 'song7',
        },
        {
          label: 'What goes on',
          value: 'song8'
        },
        {
          label: 'Girl',
          value: 'song9'
        },
        {
          label: "I'm looking through you",
          value: 'song10'
        },
        {
          label: 'In My Life',
          value: 'song11'
        },
        {
          label: 'Wait',
          value: 'song12'
        }
    ])
    const selectValue = ref([])
    const selectCheckValue = ref([])
</script>

<template>
    <n-space>
        <n-select class="cascader-div" v-model:value="selectValue" :show-checkmark = "false" :options="selectOptions" />
        <n-select
            class="cascader-div"
            v-model:value="selectCheckValue"
            :options="selectOptions"
            placeholder="请输入"
            filterable
            multiple
            clearable
            :show-checkmark = "false"
            :render-label = "renderLabel"
            :render-tag = "renderTag"
            @update:value="handleUpdateValue"
        />
    </n-space>
</template>

<style scoped lang="scss">
.cascader-div {
    width: 200px;
}
</style>