el-select clearable 清空后数据为空串

看源码是这样的

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;
    },
}

el-select Events

事件名称 说明 回调参数
change
### 关于 el-date-picker 的 clearable 属性引发的空值问题 当 `el-date-picker` 组件设置了 `clearable` 属性后,在用户手动清除了已选中的日期时,可能会触发一些逻辑错误或者未定义的行为。这通常是因为绑定的数据模型未能正确处理被清除后的状态。 #### 问题分析 在 Vue 中,`v-model` 双向绑定了组件的状态到数据对象中。如果用户通过点击清除按钮使输入框变为空,则绑定的对象可能变为 `null` 或者其他不符合预期的形式。此时如果没有适当地判断这些特殊情况,就可能导致程序运行时报错,例如 `[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘0’ of null”` 这样的警告信息[^1]。 对于范围选择器 (`type="daterange"`) 来说,其默认返回的是一个数组形式的时间区间;而单个日期选择器则会直接返回字符串表示的具体时间点。因此无论是哪种情况都需要考虑如何优雅地应对这种潜在的异常状况。 #### 解决方案 ##### 方法一:初始化合理的默认值并增加前置校验逻辑 可以调整初始数据结构来避免这种情况的发生。比如将 `time` 初始化成两个空串组成的列表而不是单纯的一个空数组: ```javascript data() { return { formInline: { time: ["", ""], // 初始即设定为有效但无意义的内容 }, start_date: "", end_date:"", }; } ``` 同时修改事件处理器函数以适应新的规则: ```javascript methods:{ changeDate(val){ if(!val || val.length === 0){ this.start_date = ""; this.end_date = ""; } else{ this.start_date = val[0]; this.end_date = val[1]; } } } ``` 这样即使用户删除了所有选项也不会再尝试访问不存在的第一个元素的位置零处的属性[^1]^。 ##### 方法二:自定义渲染方法过滤掉非法参数 另一种方式是在获取最终显示之前先经过一层转换操作,确保任何情况下都不会递给后续流程不合法的数据类型。下面展示了一个简单的例子用于说明这一思路[^3]: ```javascript const renderTime = (date) => { if (!date || date.length !== 2) {return ["",""];} let startTime,endTime; try{ startTime=new Date(date[0]).toJSON(); endTime= new Date(date[1]).toJSON(); }catch(e){ console.error(`Invalid date provided:${e.message}`); return["",""]; } return [ new Date(+new Date(startTime)+8*3600*1000).toISOString(). replace(/T/g,' ').replace(/\.[\d]{3}Z/,''), new Date(+new Date(endTime )+8*3600*1000).toISOString(). replace(/T/g,' ').replace(/\.[\d]{3}Z/,'') ]; }; ``` 然后可以在模板里调用这个辅助功能来进行安全输出: ```html <template> ... {{renderedDates}} </template> <script> export default { computed:{ renderedDates(){ return renderTime(this.formInline.time); } } } </script> ``` 这种方法的好处在于它完全隔离了原始数据源与视图层之间的联系,从而减少了因外部因素干扰而导致内部崩溃的可能性[^3]. ### 结论 以上两种策略都可以有效地缓解由于 `clearable` 导致的各种边界条件下的问题。具体采用哪一种取决于实际应用场景以及个人偏好等因素决定。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值