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

需求

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

效果

事情焦点后先触发校验,在触发查询。
在这里插入图片描述

代码

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/746627.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

比Let‘s Encrypt更简单更齐全的免费证书申请教程

步骤一 打开JoySSL官网&#xff0c;注册属于你的专属账号&#xff1b; 永久免费SSL证书申请地址真正完全且永久免费&#xff01;不用您花一分钱&#xff0c;SSL证书免费使用90天&#xff0c;并且还支持连续签发。JoySSL携手全球权威可信顶级根&#xff0c;自研新一代SSL证书&…

【汇编】#3 8086与数据有关的寻址方式

文章目录 操作码与操作数1. 8086处理器的与数据有关的寻址方式1.1 立即数寻址方式1.2 寄存器寻址方式 2. 有效&#xff08;偏移&#xff09;地址&#xff08;effective address&#xff0c;EA&#xff09;与缺省段寄存器选择tips:段跨越前缀2.1 直接寻址tips:直接寻址与立即寻址…

GitOps实践之Argo CD (2)

argocd 【-1】argocd可以解决什么问题? helm 部署是手动的?依赖流水线。而有时候仅仅更新一个小东西,流水线跑好久,CD真的不应该和CI耦合。不同环境的helm配置不同,手动修改问题多,可以用git管理起来,例如分不同环境用目录区分。argocd创建应用可以不通环境部署到不同集…

Seata 2.x 系列【12】高可用集群部署

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Seata 版本 2.0.0 本系列Spring Boot 版本 3.2.0 本系列Spring Cloud 版本 2023.0.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-seata-demo 文章目录 1. 概述2. 搭建演…

声卡喊话IP喇叭,IP网络吸顶天花喇叭

声卡喊话IP喇叭&#xff0c;IP网络吸顶天花喇叭 SV-7043VP是一款ip/sip网络吸顶喇叭&#xff0c;具有10/100M以太网接口&#xff0c;从网络接口接收网络的音频数据后播放。本网络吸顶喇叭可以与其他广播主机、服务器软件和采播主机配合使用&#xff0c;实现音频的播放&#xf…

大语言模型:Query Rewriting for Retrieval-Augmented Large Language Models

总体思路 作者首先指出大语言模型虽然取得了很好的效果&#xff0c;但是仍然存在幻觉和时间顺序混乱的问题&#xff0c;因此需要额外知识库和LLM内部知识库相结合&#xff0c;来修正&#xff1b;因此优化传统的retriever-reader的方案成为需要&#xff1b;目前的研究方案当中使…

log4cplus在Qt linux中的应用与问题解决

log4cplus在Qt linux中的应用与问题解决 背景log4cplus下载遇到问题&#xff1a;libm.so.6:undefined reference to __strtof128_nanGLIBC_PRIVATE‘解决方案编译生成在Qt工程里面添加对应依赖编译运行成功 背景 最近工作中需要用到log4cplus的日志做一些记录&#xff0c;用了…

Linux——ELK日志分析系统

实验环境 虚拟机三台CentOS 7.9&#xff0c; 组件包 elasticsearch-5.5.0.rpm elasticsearch-head.tar.gz node-v8.2.1.tar.gz phantomjs-2.1.1-linux-x86_64.tar.bz2 logstash-5.5.1.rpm kibana-5.5.1-x86_64.rpm 初始…

Lombok原理及实例(Java) - 简化JavaBean开发

Lombok 1.作用:简化javabean开发 2.使用:a.下插件 -> 如果是idea2022不用下载了,自带b.导lombok的jar包c.修改设置 1.lombok介绍 Lombok通过增加一些“处理程序”&#xff0c;可以让javabean变得简洁、快速。 Lombok能以注解形式来简化java代码&#xff0c;提高开发效…

优选算法[1]

目录 1.双指针&#xff1b; 2.滑动窗口&#xff1b; 3.二分查找&#xff1b; 4.前缀和&#xff1b; 1.双指针&#xff1b; 包括对撞指针和快慢指针(一般用来循环&#xff09;&#xff1b; 题目类型&#xff1a;移动零&#xff0c;复写零&#xff0c;快乐数&#xff0c;盛…

【UE5】动画混合空间的基本用法

项目资源文末百度网盘自取 什么是动画混合空间 混合空间分为两种: 通过一个数值控制通过两个数值控制 下面通过演示让大家更直观地了解 在Character文件夹中单击右键,选择动画(Animation),选择旧有的混合空间1D 然后选择骨骼&#xff08;动画是基于骨骼显示的,所以需要选择…

vue防止用户连续点击造成多次提交

中心思想&#xff1a;在第一次提交的结果返回前&#xff0c;将提交按钮禁用。 方法一&#xff1a;给提交按钮加上disabled属性&#xff0c;在请求时先把disabled属性改成true&#xff0c;在结果返回时改成false 方法二&#xff1a;添加loading遮罩层&#xff0c;可以直接使用e…

北京保险服务中心携手镜舟科技,助推新能源车险市场规范化

2022 年&#xff0c;一辆新能源汽车在泥泞的小路上不慎拖底&#xff0c;动力电池底壳受损&#xff0c;电池电量低。车主向保险公司报案&#xff0c;希望能够得到赔偿。然而&#xff0c;在定损过程中&#xff0c;保司发现这辆车的电池故障并非由拖底事件引起&#xff0c;而是由于…

EDM营销平台的核心功能?如何做精准营销?

EDM营销平台如何选择&#xff1f;怎么使用邮件营销平台优化发信&#xff1f; EDM营销平台以其独特的优势&#xff0c;成为了企业实现精准营销、提升品牌影响力的重要工具。那么&#xff0c;EDM营销平台究竟拥有哪些核心功能呢&#xff1f;接下来&#xff0c;AokSend就来一一探…

PyQt5---初识PyQt5相关及开发实战介绍

什么是GUI GUI是Graphical User Interface&#xff08;图形用户界面&#xff09;的缩写&#xff0c;是一种用户与计算机交互的方式&#xff0c;通过使用图形化的元素&#xff08;如按钮、窗口、菜单等&#xff09;来帮助用户完成任务。GUI使得用户可以通过鼠标、键盘等输入设备…

【C语言】整数存储、大小端概念

文章目录 整数存储大小端 整数存储 在计算机中&#xff0c;整数都是通过二进制保存的&#xff0c;不论是十六进制还是八进制还是十进制 整数的2进制表⽰⽅法有三种&#xff0c;即原码、反码和补码 对于整形来说&#xff1a;数据存放内存中其实存放的是补码 在计算机系统中&…

LinuxU盘挂载原理,为什么要用到U盘挂载及实现U盘挂载

目录 一、U盘挂载原理 二、为什么要用到U盘挂载 三、实现U盘挂载 一、准备工作 1、安装gcc 2、下载ntfs-3g 3、解压 4、编译准备 5、编译并安装 二、挂载演示 一、U盘挂载原理 Linux的U盘挂载原理涉及以下几个方面&#xff1a; 设备识别&#xff1a;当您将U盘插入Lin…

DVWA 靶场搭建

文章目录 环境说明1 DVWA 简介2 DVWA 安装 环境说明 操作系统&#xff1a;Windows 10PHPStudy 版本: 8.1.1.3Apache 版本&#xff1a;2.4.39MySQL 版本 5.7.26 1 DVWA 简介 DVWA&#xff08;Damn Vulnerable Web App&#xff09;是一个基于 “PHP MySQL” 搭建的Web应用程序&…

Linux多进程中wait()函数学习

wait()函数是Linux/Unix系统里的一个系统级函数&#xff0c;在C语言中通过#include <sys/wait.h>包含该系统调用的头文件。 想要查看如何使用这个函数&#xff0c;可以在终端中输入&#xff1a; man 2 wait如下图&#xff1a; wait系统调用可以让父线程阻塞等待子线程的…

DM数据库安装及使用(Windows、Linux、docker)

Windows 先解压安装包 点击setup安装 下一步 勾选接受然后下一步 下一步 选择典型安装下一步 下一步 搜索DM数据库配置助手然后一直下一步 然后搜索DM管理工具 登录 登录成功 widows版本安装成功 Linux安装 操作系统CPU数据库CentOS7x86_64 架构dm8_20230418_x86_rh6_64 …