d2-crud-plus 使用小技巧（五）—— 搜索时间（或下拉列表）后，点击X清除按钮后返回值为null，导致异常

问题

使用vue2+elementUI+d2-crud-plus，时间组件自动清除按钮，点击清除按钮后对应的值被设置为null，原本应该是空数组（[]），导致数据传到后端后报错。不仅适用于搜索，表单一样有效果。

解决方法

看官方文档没有明确说明，但是有一段代码给了启发：

on:{ //除input change事件外，更多组件事件监听select(event){console.log(event)} //监听表单组件的select事件
},

官方文档

代码

crud.js

export const crudOptions = (vm) => {return {...columns: [...{title: '时间',key: 'time',type: 'datetime',search: { // 搜索disabled: false, // 是否禁用该字段的查询width: '250px',component: { // 查询框组件配置，默认根据form配置生成name: 'el-date-picker',props: {'value-format': 'yyyy-MM-dd',type: 'daterange','range-separator': '-','start-placeholder': '开始时间','end-placeholder': '结束时间','picker-options': {disabledDate(time) {return time.getTime() > Date.now() || time.getTime() < Date.now() - 1000 * 60 * 60 * 24 * 90}}},on: {change(node) {if (!node.event) {node.event = []}}}},order: 6 // 查询字段排序，数字越小越靠前},},...]...}
}