d2-crud-plus 使用小技巧（四）—— 搜索限制只能输入数字

需求

搜索时有些字段需要限制，比如只能输入数字，不能存在其他字符包括空格。

效果

事情焦点后先触发校验，在触发查询。

代码

crud.js

export const crudOptions = (vm) => {
	return {
		...
		columns: [
			...
			{
		        title: '号码',
		        key: 'number',
		        search: { // 搜索
		          disabled: false, // 是否禁用该字段的查询
		          width: '120px',
		          order: 1 // 查询字段排序，数字越小越靠前
		        }
		    }
		    ...
		]
	}
}

index.vue

<template>
  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
    <d2-crud-x ref="d2Crud" v-bind="_crudProps" v-on="_crudListeners" @play-recording="playRecording"
      @download-recording="downloadRecording">
      <template slot="header">
        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"></crud-search>
        <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners" />
      </template>
    </d2-crud-x>
  </d2-container>
</template>

import { d2CrudPlus } from 'd2-crud-plus'
import { crudOptions } from './crud'
<script>
	export default {
		mixins: [d2CrudPlus.crud],
		...
		pageRequest(query) {
	      // 设置搜索栏中的值 有修改设置，无修改不设置
	      if (query.number) {
	      	query.number = query.number.replace(/\D/g, '') // 只保留数字
	        this.getSearch().getForm().number= query.number // 将修改后的数据赋值到搜索框中
	      }
	      return api.GetList(query)
	    }, // 数据请求
		...
	}
</script>