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>