element +.net core Api解决 el-select clearable 清空后数据为空串导致模型绑定失败

element 看源码是这样的

handleClearClick(event) {
    this.deleteSelected(event);
},
 
deleteSelected(event) {
    event.stopPropagation();
    const value = this.multiple ? [] : '';
    this.$emit('input', value);
    this.emitChange(value);
    this.visible = false;
    this.$emit('clear');
},

如果需要设置为 null ，就需要自己写 clear 事件。

即便是写了 clear 事件，其 clear 事件触发也在change事件之后。

<el-select filterable v-model="value" @clear="clearValue" clearable>
    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
 
 
methods: {
    clearValue(val) {
        this.value = null;
    },
}

 

 

 element-plus 中，可以使用下述代码：

                    <el-select
                      v-model="form.usePlaceId"
                      @clear="form.usePlaceId = undefined"
                      clearable
                      placeholder="请选择使用地"
                      filterable
                      :disabled="form.assetId > 0 ? true : false">
                      <el-option v-for="item in usePlaceList" :label="item.placeName" :key="item.usePlaceId" :value="item.usePlaceId"></el-option>
                    </el-select>

 

注意：在 .net core webApi 中 int 、long 类型如果前端传递的值为空字符串，那绑定模型肯定会为空。会进入下述截图上的方法里面。

 

 

 

解决方式：前端下拉选项值为 number 类型的数据，添加了clearable 属性的el-select el-tree-select 必须要 添加事件处理 @clear="form.xxx= undefined"

 

版权声明：本文为CSDN博主「wangooo」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wangooo/article/details/120527425