在使用Select组件时,用v-mdodel绑定一个可为null的类型,如const value = ref<string | null>(""),vscode直接标红报错了。 但如果是 string | undefined就正常。
但现实是,某些情况下只能用null。
比如调一个后端的接口,新增一个物品。有的后端就会报错,因为JSON.stringify会把undefined对应键给移除,导致后端收到的object与实体类键数量不匹配,会转换报错。
这个要怎么解决呢?
求助!!!👍👍💕
官方的文档
全局配置 | Element Plus,下图中的组件应该是可以设置为null的。
实际效果
编辑器提示类型不匹配, 版本最新版 "element-plus": "^2.9.5"
测试代码如下:
<template>
<el-config-provider :value-on-clear="() => null" :empty-values="[undefined, null]">
<div class="flex flex-wrap gap-4 items-center">
<el-select v-model="value2" clearable placeholder="Select" style="width: 240px" >
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="value1" clearable placeholder="Select" style="width: 240px" >
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-config-provider>
</template>
<script lang="ts" setup>
import { ref } from "vue"
const value1 = ref<string | null>("")
const value2 = ref<string | undefined>("")
const options = [
{
value: "",
label: "All",
},
{
value: "Option1",
label: "Option1",
},
]
</script>