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-selectclass="cascader-div"v-model:value="selectCheckValue":options="selectOptions"placeholder="请输入"filterablemultipleclearable:show-checkmark = "false":render-label = "renderLabel":render-tag = "renderTag"@update:value="handleUpdateValue"/></n-space>
</template><style scoped lang="scss">
.cascader-div {width: 200px;
}
</style>