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 // 查询字段排序，数字越小越靠前
		        },
			},
			...
		]
		...
	}
}