ElementUI 问题清单

1、form 下面只有一个 input 时回车键刷新页面

原因是触发了表单默认的提交行为,给el-form 加上@submit.native.prevent就行了。

<el-form inline @submit.native.prevent><el-form-item label="订单号"><el-inputv-model="query.orderNo":placeholder="输入订单号查询"clearable@keyup.enter.native="enterInput"/></el-form-item>
</el-form>

2、表格固定列最后一行显示不全

这种情况有时在宽度刚好处于临界值状态时会出现。因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮挡

// 设置全局
.el-table__fixed-right {height: 100% !important;
}

3、气泡确认框文档里的confirm事件不生效

版本:element-ui: "2.13.2", vue: "2.6.10"

// 将confirm改为onConfirm
@onConfirm="onDeleteOrder(row.id)"

4、输入框用正则限制但绑定值未更新

看到项目里有下面这么一段代码:

<el-input v-model="form.retailMinOrder" placeholder="请输入" onkeyup="value=value.replace(/[^\d.]/g,'')" 
/>

这样做虽然输入框的显示是正确的,但绑定的值是没有更新的,将 onkeyup 改为 oninput 即可。

PS:输入中文后 v-model 会失效,下面的方式更好一点:

<el-input v-model="form.retailMinOrder" placeholder="请输入" @keyup.native="form.retailMinOrder=form.retailMinOrder.replace(/[^\d.]/g,'')"
/>

5、去除type="number"输入框聚焦时的上下箭头


/* 设置全局 */
.clear-number-input.el-input::-webkit-outer-spin-button,
.clear-number-input.el-input::-webkit-inner-spin-button {margin: 0;-webkit-appearance: none !important;
} 
.clear-number-input.el-input input[type="number"]::-webkit-outer-spin-button,
.clear-number-input.el-input input[type="number"]::-webkit-inner-spin-button {margin: 0;-webkit-appearance: none !important;
}
.clear-number-input.el-input {-moz-appearance: textfield;
} 
.clear-number-input.el-input input[type="number"] {-moz-appearance: textfield;
}
<el-input type="number" class="clear-number-input" />

6、只校验表单其中一个字段

在一些用户注册场景中,提交整个表单前有时候会做一些单独字段的校验,例如发送手机验证码,发送时只需要校验手机号码这个字段,可以这样做:

this.$refs['form'].validateField('mobile', valid => {if (valid) {// 发送验证码}
})

如果需要多个参数,将参数改为数组形式即可。

7、弹窗重新打开时表单上次的校验信息未清除

有人会在open时在$nextTick里重置表单,也可以在关闭时进行重置。

<el-dialog @close="onClose"><el-form ref="form"></el-form>
</el-dialog>// 弹窗关闭时重置表单
onClose() {this.$refs['form'].resetFields()
}

8、表头与内容错位

用下面这个办法:

// 全局设置
.el-table--scrollable-y .el-table__body-wrapper {overflow-y: overlay !important;
}

9、表单多级数据结构校验问题

<el-form :model="form"><el-form-item label="部门" prop="dept"></el-form-item><el-form-item label="姓名" prop="user.name"></el-form-item>
</el-form>
rules: {'user.name': [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
}

10、表格跨分页多选

看到项目里有小伙伴手动添加代码去处理这个问题,其实根据文档,只需加上row-key和reserve-selection即可。

<el-table row-key="id"><el-table-column type="selection" reserve-selection></el-table-column>
</el-table>

11、根据条件高亮行并去除默认hover颜色

<el-table :row-class-name="tableRowClassName">
</el-table>tableRowClassName({ row }) {return row.status === 2 ? 'highlight' : ''
}// 设置全局
.el-table .highlight {background-color: #b6e8fe;&:hover > td {background-color: initial !important;}td {background-color: initial !important;}
}

12、表单不想显示label但又想显示必填星号怎么办

// label给个空格即可
<el-form><el-table><el-table-column label="名称"><template><el-form-item label=" "><el-input placeholder="名称不能为空" /></el-form-item></template></el-table-column></el-table>
</el-form>

13、table 内嵌 input 调用 focus 方法无效

<el-table><el-table-column label="名称"><template><el-input ref="inputRef" /></template></el-table-column>
</el-table>// 无效
this.$refs['inputRef'].focus()
this.$refs['inputRef'][0].focus()
this.$refs['inputRef'].$el.children[0].focus()// 有效
<el-input id="inputRef" />
document.getElementById('inputRef').focus()

14、表格内容超出省略

看到有小伙伴在代码里自己手动去添加CSS来实现,害,又是一个不看文档的反面例子,其实只要加个show-overflow-tooltip就可以了,还自带tooltip效果,不香吗?

<el-table-column label="客户名称" prop="customerName" show-overflow-tooltip>
</el-table-column>

15、el-tree 展开/收起所有节点

<el-tree ref="tree"></el-tree>expandTree(expand = true) {const nodes = this.$refs['tree'].store._getAllNodes()nodes.forEach(node => {node.expanded = expand})
}

16、el-popover 位置偏移问题

事情起因:el-popover 里的内容是动态获取的,所以刚打开时位置正确,此时内容为空,等到获取数据渲染后 el-popover 内容盒子大小发生变化从而造成位置偏移。

解决办法:通过源码知道 el-popover 里有个 updatePopper 方法用于更新位置(文档里没有),所以只需在获取数据后重新 updatePopper 就可以了。

<el-popover ref="popover" placement="left" trigger="click">
</el-popover>// 获取数据后
this.$nextTick(() => {this.$refs['popover'].updatePopper()
})

17、el-dialogdestroy-on-close 属性设置无效

destroy-on-close 设置为 true 后发现弹窗关闭后 DOM 元素仍在,没有被销毁。

解决办法:在 el-dialog 上添加 v-if

<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close>
</el-dialog>

18、el-cascader 选择后需要点击空白处才能关闭

级联选择器在设置为可选任意一级时,选定某个选项时需要手动点击空白处才能关闭。

解决办法:可在 change 事件触发时将其关闭。

<el-cascaderref="cascader"@change="onChange"
/>onChange() {this.$refs['cascader'].dropDownVisible = false
}

19、使用图片查看器

el-image 组件是自带图片预览功能的,传入 preview-src-list 即可。但有时候不用 image 组件但又想预览大图怎么办?例如点击一个按钮时弹出一个图片查看器?

答案是使用 el-image-viewer,文档里并没有这个组件,但通过查看源码知道,该组件正是 el-image 里预览图片所用的。

<template><div><el-button @click="open">打开图片预览</el-button><el-image-viewerv-if="show":on-close="onClose":url-list="urls":initial-index="initialIndex"/></div>
</template><script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'export default {components: {ElImageViewer},data() {return {show: false,urls: ['https://img0.baidu.com/it/u=391928341,1475664833&fm=26&fmt=auto&gp=0.jpg'],initialIndex: 0}},methods: {open() {this.show = true},onClose() {this.show = false}}
}
</script>

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

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

相关文章

ArcGIS求取多个点距离线要素的最近距离以及距离倒数

本文介绍在ArcMap软件中&#xff0c;对于点要素中的每一个点&#xff0c;求取其距离最近的道路的距离、距离倒数的方法。 首先&#xff0c;看一下本文的需求。现在已知一个点要素&#xff0c;其中含有多个点&#xff0c;假设每一个点表示城市中的一家商店&#xff1b;同时&…

【数据库系列】Spring Boot如何配置Flyway的回调函数

Flyway 提供了回调机制&#xff0c;使您能够在特定的数据库迁移事件发生时执行自定义逻辑。通过实现 Flyway 的回调接口&#xff0c;可以在迁移前后执行操作&#xff0c;如记录日志、执行额外的 SQL 语句等。 1. 创建自定义回调类 要配置 Flyway 的回调函数&#xff0c;需要创…

网络安全(1)_对称加密和非对称加密

1 网络安全概述 1.1 计算机网络面临的安全威协 &#xff08;1&#xff09;截获&#xff1a;攻击者从网络上窃听他人的通信内容&#xff0c;通常把这类攻击称为“截获”。在被动攻击中&#xff0c;攻击者只是观察和分析某一个协议数据单元&#xff08;PDU&#xff09;而不干扰信…

【查询基础】.NET开源 ORM 框架 SqlSugar 系列

&#x1f4a5; .NET开源 ORM 框架 SqlSugar 系列 &#x1f389;&#x1f389;&#x1f389; 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列…

计算机毕业设计Python+大模型农产品推荐系统 农产品爬虫 农产品商城 农产品大数据 农产品数据分析可视化 PySpark Hadoop

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

C语言——指针基础

1 指针基础 怎么获得变量地址 1 如何产生一个指针变量——>类型* 标识符;int* p1;char* p2;double* p3;//不同类型的基本指针占用内存是一样的都是4个字节&#xff08;32位&#xff09;/8个字节&#xff08;64位&#xff09;&#xff0c;都是存的地址2 数组名是数组首地址…

Python语法基础---正则表达式

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 我们这个文章所讲述的&#xff0c;也是数据分析的基础文章&#xff0c;正则表达式 首先&#xff0c;我们在开始之前&#xff0c;引出一个问题。也是我们接下来想要解决的问题。…

网络练级宝典-> UDP传输层协议

目录 传输层 端口号 端口号和进程的关系 UDP协议 UDP协议格式 UDP数据封装&#xff1a; UDP数据分用&#xff1a; 面向数据报 UDP的缓冲区 UDP的缺点 基于UDP的应用层协议 传输层 端口号 我们知道端口号对应的其实就是一个进程的pid&#xff0c;在操作系统中二者的…

容器运行应用及Docker命令

文章目录 一、使用容器运行Nginx应用1_使用docker run命令运行Nginx应用1 观察下载容器镜像过程2 观察容器运行情况 2_访问容器中运行的Nginx服务1 确认容器IP地址2 容器网络说明3 使用curl命令访问 二、Docker命令1_Docker命令获取帮助方法2_Docker官网提供的命令说明3_docker…

JDK17 下载与安装

下载安装包 针对不同的操作系统, 需要下载对应版本的 JDK. 如果电脑是 Windows32 位的, 建议重装系统, 重装成 64 位的操作系统. 因为 Java 从 9 版本开始, 就已经不提供 32 位版本的安装包了. 官网下载 官网下载链接 需要登录 Oracle 账号才能下载. 账号: 2872336204qq.c…

6.1 innoDb逻辑存储结构和架构-简介

InnoDB 是 MySQL 默认的存储引擎&#xff0c;以其强大的事务支持、崩溃恢复能力和高效的数据处理能力广受欢迎。本文从逻辑存储结构、内存架构、磁盘结构到后台线程&#xff0c;逐步剖析 InnoDB 的关键概念&#xff0c;帮助您更好地理解和应用。 1. 逻辑存储结构 InnoDB 的数据…

SpringBoot小知识(4):高级配置知识与bean的绑定

一、EnableConfigurationProperties ConfigurationProperties注解在我们之前讲过&#xff0c;他是从配置中读取参数封装给实体类的一个注解。 那么EnableConfigurationProperties是个啥呢&#xff1f; EnableConfigurationProperties 是 Spring Framework 中用于启用基于配置文…

Vue 实现无线滚动效果

目录 1.Element-plus官网中的Infinite Scroll组件说明 2.滚动条设置 3.滚动到底部的函数调用 1.Element-plus官网中的Infinite Scroll组件说明 官网链接如下所示&#xff1a; Infinite Scroll 无限滚动 | Element Plus 首先查看该代码&#xff0c;发现这个组件使用了一个…

Spring Cloud Alibaba 之 “Sentinel”

从网上下载好sentinel-dashboard-1.6.3.jar&#xff0c;然后执行 java -jar sentinel-dashboard-1.6.3.jar,执行成功之后在浏览器输入localhost:8080&#xff0c;Sentinel的登录名和密码都是sentinel,登陆成功之后看到只有一个首页。 接下来开始整合Spring Cloud Alibaba Sen…

【Android】从事件分发开始:原理解析如何解决滑动冲突

【Android】从事件分发开始&#xff1a;原理解析如何解决滑动冲突 文章目录 【Android】从事件分发开始&#xff1a;原理解析如何解决滑动冲突Activity层级结构浅析Activity的setContentView源码浅析AppCompatActivity的setContentView源码 触控三分显纷争&#xff0c;滑动冲突…

用友NC yerfile/down SQL注入漏洞复现(XVE-2024-34596)

0x01 产品简介 用友NC(也称用友NC6或NCC)是用友网络科技股份有限公司开发的一款企业级管理软件,旨在为企业提供全方位的管理服务。主要面向大型企业和集团公司,提供全面的财务和业务管理解决方案,助力企业实现数字化转型和高效管理。采用J2EE架构和先进开放的集团级开发平…

Linux-GPIO应用编程

本章介绍应用层如何控制 GPIO&#xff0c;譬如控制 GPIO 输出高电平、或输出低电平。 只要是用到GPIO的外设&#xff0c;都有可能用得到这些操作方法。 照理说&#xff0c;GPIO的操作应该是由驱动层去做的&#xff0c;使用寄存器操作或者GPIO子系统之类的框架。 但是&#xff0…

18 - Java 线程

简介 进程&#xff08;process&#xff09; 对一个程序的运行状态, 以及在运行中所占用的资源(内存, CPU)的描述&#xff1b; 一个进程可以理解为一个程序; 但是反之, 一个程序就是一个进程, 这句话是错的。 进程的特点: 独立性: 不同的进程之间是相互独立的, 相互之间资源…

PyQt登录小窗口实现 内服代码及知识点总结

一、登录窗口 二、实现代码 import sysfrom PyQt6.QtGui import QIcon, QPixmap, QMovie from PyQt6.QtWidgets import QApplication, QWidget, QLabel, QPushButton, QLineEdit#封装我的窗口类 class MyWidget(QWidget):#构造函数def __init__(self):#初始化父类super().__in…

python之Django连接数据库

文章目录 连接Mysql数据库安装Mysql驱动配置数据库信息明确连接驱动定义模型在模型下的models.py中定义表对象在settings.py 中找到INSTALLED_APPS添加创建的模型 测试testdb.py中写增删改查操作urls.py添加请求路径启动项目进行测试 连接Mysql数据库 安装Mysql驱动 pip inst…