vue2 element 踩坑爬坑

动态增减表单项

这个其实官网有demo,但是自己也调试了好久,记录下,具体写法自己查看文档:https://element.eleme.cn/#/zh-CN/component/form
在这里插入图片描述

关键地方在于key,新增数组时,要在数据里增加个key,同时需要把循环数据的地方key设置为这个key,这样删除,form rules校验可会跟着一起清掉的
在这里插入图片描述

在这里插入图片描述

DateTimePicker 选择器限制选择时间

基础写法参考文档:https://element.eleme.cn/#/zh-CN/component/datetime-picker,我这里限制开始时间,结束时间也类似就不写了

  • 限制要选择大于当前时间
 <el-date-pickerv-model="formData.listingTime"type="datetime":picker-options="pickerOptions"
/>
pickerOptions: {selectableRange: (() => {const data = new Date(Date.parse(new Date()) + 1000)const hour = data.getHours()const minute = data.getMinutes()const second = data.getSeconds()return [`${hour}:${minute}:${second} - 23:59:59`]})(),disabledDate(time) {var date = new Date(Date.parse(new Date()) + 1000)date.setFullYear(date.getFullYear() + 2)date.setDate(date.getDate() - 1)return (time.getTime() <= Date.now() - 8.64e7) || (time.getTime() > date.getTime())}
},

目前还有个问题,就是秒虽然选择上可以被禁掉,但是样式上没有禁用的效果,这个需要等爬出这个坑再来完善文档

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

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

相关文章

如何在 Kubernetes 中借助Ingress 实现灰度发布和蓝绿发布

前言 部署在 Kubernetes 集群中的应用&#xff0c;在升级发布时可能会存在的问题&#xff1a; 1&#xff0c;由于 Kuberneter 底层 Pod 容器生命周期与网络组件生命周期是异步管理的&#xff0c;在升级时如果没有处理好应用优雅退出的问题&#xff0c;就很容易导致 http 访问请…

Vscode自动移出不用的包

Vscode自动移出不用的包 在Vscode中删除不用的包、Vscode移出不用的包、Vscode移出不用的import包 设置 找到setting.json&#xff08;在字体设置里面&#xff09;&#xff0c;添加如下配置 "editor.codeActionsOnSave": { "source.organizeImports": tru…

FreeSWITCH 1.10.10 简单图形化界面1 - docker/脚本/ISO镜像安装

FreeSWITCH 1.10.10 简单图形化界面1 - docker/脚本/ISO镜像安装 0. 界面预览1. Docker安装1.1 下载docker镜像1.2 启动docker镜像1.3 登录 2. 脚本安装2.1 下载2.2 安装2.3 登录2.4 卸载程序 3. 镜像安装3.1 下载镜像3.2 安装镜像3.3 登录 0. 界面预览 http://myfs.f3322.net…

building and deploying a single-Master RocketMQ cluster

building and deploying a single-Master RocketMQ cluster 1 、下载RocketMQ安装包(这里是通过源码安装)2、安装3、启动nameserver4、启动borkerStart the broker serviceVerify that the broker service is started successfully, for example, the brokers ip is 192.168.1.…

android amazon 支付接入

流程&#xff1a; 申请 Amazon 开发者帐号 ---> 在 amazon 控制台添加应用 ---> 添加应用内商品&#xff08;消费类商品&#xff0c;授权类商品&#xff0c;订阅类商品&#xff09;---> 导出 JSON 文件 --->集成 Amazon 支付 ---> 将导出的 JSON 文件 copy 到 …

FairyGUI-Unity 异形屏适配

本文中会修改到FairyGUI源代码&#xff0c;涉及两个文件Stage和StageCamera&#xff0c;需要对Unity的屏幕类了解。 在网上查找有很多的异形屏适配操作&#xff0c;但对于FairyGUI相关的描述操作很少&#xff0c;这里我贴出一下自己在实际应用中的异形屏UI适配操作。 原理 获…

Python爬虫逆向实战案例(五)——YRX竞赛题第五题

题目&#xff1a;抓取全部5页直播间热度&#xff0c;计算前5名直播间热度的加和 地址&#xff1a;https://match.yuanrenxue.cn/match/5 cookie中m值分析 首先打开开发者工具进行抓包分析&#xff0c;从抓到的包来看&#xff0c;参数传递了查询参数m与f&#xff0c;同时页面中…

C++数据结构学习——双向循环链表

双向循环链表特点 **双向链接&#xff1a;**每个节点都包含两个指针&#xff0c;一个指向前一个节点&#xff08;前驱节点&#xff09;&#xff0c;另一个指向后一个节点&#xff08;后继节点&#xff09;。这种双向连接使得在链表中可以轻松地在两个方向上遍历节点。 **循环…

uniapp scrollview 滚动最新位置

uniapp 效果是模拟发送聊天信息&#xff0c;需要scrollview在收到新消息时滚动到底部最新的位置 项目是vue2的&#xff0c;代码如下 // 第一种 高度固定值 scrollToBottom(selector) {this.$nextTick(() > {const dom uni.createSelectorQuery().in(this).select(selecto…

手机自动无人直播,实景无人直播真的有用吗?

继数字人直播之后&#xff0c;手机自动直播开始火热了起来&#xff0c;因为其门槛低&#xff0c;成本低&#xff0c;一部手机一个账号就可以实现直播&#xff0c;一时深受广大商家的好评。那么&#xff0c;手机自动无人直播究竟是如何实现自动直播的呢&#xff1f; 在传统的直…

【Golang】什么是内存逃逸?

文章目录 要从C/C谈起Golang的内存逃逸 要从C/C谈起 在C/C中&#xff0c;局部变量被分配到栈区&#xff0c;一旦当前函数执行完毕&#xff0c;局部变量占用的内存也将被释放&#xff0c;因此以下代码无法将数组的内容传递出去。 int *getArray() {int array[7] {1, 2, 3, 4,…

什么是数据中心IP,优缺点是什么?

如果根据拥有者或者说发送地址来分类的话&#xff0c;可以将代理分为三类&#xff1a;数据中心ip,住宅ip,移动ip 本文我们来了解数据中心ip的原理以及他们的优势劣势&#xff0c;才能选择适合自己的代理。 一、什么是数据中心ip代理&#xff1f; 数据中心ip是由数据中心拥有…

victoriametrics获取指标情况脚本

get_job.sh脚本 #!/bin/bash #获取所有的job list&#xff0c;循环获取vm的job指标推送量&#xff0c;累加整个x月份的指标推送量#线下 #ip_port"x.x.x.x:80" #线上 ip_port"x.x.x.x:80"get_jobcurl -sG "http://$ip_port/select/0/prometheus/api/v…

浏览器输入一个URL之后发生了什么?

URL解析DNS解析TCP连接TSL连接HTTP请求TCP挥手接收并解析响应 URL 解析 主要分为&#xff1a; 协议&#xff0c;eg http,https域名或者ip地址&#xff0c;eg www.baidu.com 域名相对于ip地址来说&#xff0c;更方便人们记忆&#xff0c;但是实际的网络传输中使用的是ip地址 端…

一、使用maven新建springboot

1. 新建maven项目 2. 修改pom.xml文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http:…

SSM框架和Spring Boot+Mybatis框架的性能比较?

SSM框架和Spring BootMybatis框架的性能比较&#xff0c;没有一个绝对的答案&#xff0c;因为它们的性能受到很多因素的影响&#xff0c;例如项目的规模、复杂度、需求、技术栈、团队水平、测试环境、测试方法等。因此&#xff0c;我们不能简单地说哪个框架的性能更好&#xff…

widnows 制作winpe启动盘

下载 官网 大白菜官网,大白菜winpe,大白菜U盘装系统, u盘启动盘制作工具 点击装机版&#xff0c;进行下载&#xff0c;等待下载完成 安装 解压 双击exe运行 插入u盘 识别到的u盘 点击【一键制作成usb启动盘】 点击确定&#xff0c;等待制作完成 重启电脑&#xff0c;选择从…

机器学习深度学习——NLP实战(自然语言推断——微调BERT实现)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——针对序列级和词元级应用微调BERT &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文…

LeetCode5:最长回文子串、LeetCode647:回文子串

文章目录 LeetCode647&#xff1a;回文子串题目示例提示解题思路解题代码复杂度 LeetCode5:最长回文子串题目示例提示解题思路解题代码复杂度 总结 LeetCode647&#xff1a;回文子串 题目 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字…

Module not found: Error: Can‘t resolve ‘vue-pdf‘ in ‘xxx‘

使用命令npm run serve时vue项目报错&#xff1a; Module not found: Error: Cant resolve vue-pdf in xxx 解决方案&#xff1a; 运行命令&#xff1a; npm install vue-pdf --save --legacy-peer-deps 即可解决。 再次顺利执行npm run serve