ElementUI中组件使用clearable清空后值为null、undefined的解决方案

在element-puls的ui组件中，有很多组件都提供了clearable属性，可点击直接清空表单组件内容，比如说input输入框、select选择器、cascader级联选择器等。在实际项目开发时，很少有人注意到，当我们点击清空表单组件内容时，对应表单的内容有时并不会变为我们之前设置的默认值。

比如：el-input输入框在点击清空后，对应的属性值为空字符串，这基本是符合常理的；el-select选择器在点击清空后，对应的属性值为：undefined；el-cascader和el-date-picker在点击清空后，对应的属性值为null。

其中el-input和el-select两个组件提供了@clear的事件，可以在点击clearable清空时触发。

对应测试代码如下：

<h2>el-input</h2>
<el-input clearable v-model="val01" @clear="clearInput"/>

<el-button @click="console.log(val01)">打印val01</el-button>

js部分：

val01 = shallowRef('1');

因为，每个组件被清空后的值都不相同，在一定程度上是有一些混乱的，猜测ElementPlus官方以后可能会优化这一问题，但是目前这个问题，我们还需要自己解决。

上述通过clear事件去修正值的解决方法算一种，但个人感觉不是很好。其次，有很多人说使用watch监听去实现，这在一些无需提交数据至后端的场景下感觉是有用的，但是在需要将数据提交至后端的情况下，个人觉的，还是在提交数据之前，手动将这些为null或undefined的字段进行修正一次，如下：

data.pid = data.pid ?? 0

另外，在后端对存在clearable属性的字段，最好也做同样的处理。如：

$data['pid'] = $data['pid'] ?? 0;

这样基本上就可以保证不出错了。

不使用watch，是因为数据在提交之前，可能会经过多次修改，在这期间事实上是没必要去不停地修正的，虽然对性能和效率的影响很小。但是当一个表单中存在多个这样的组件时，难免会让代码有些混乱。因此，还是推荐在数据提交之前进行数据的修正。