需求

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

效果

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

代码

crud.js

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

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) {this.getSearch().getForm().number= query.number}return api.GetList(query)}, // 数据请求...}
</script>