![](https://img-blog.csdnimg.cn/8d2d6d3a71344650874e990d3b599fe0.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
elementui
elementui的相关内容
金乌Y
这个作者很懒,什么都没留下…
展开
-
el-date-picker 限制选择范围最大为一年,设置快捷选项,设置默认时间
主要代码为::picker-options="pickerOptions" 以及 @blur="pickerBlur"原创 2023-12-12 14:29:16 · 3581 阅读 · 0 评论 -
el-table 表格多选(后端接口搜索分页)实现已选中的记忆功能。实现表格数据和已选数据(前端分页)动态同步更新。
其实也很简单,就是从右侧表格全部数据中,将要删除的数据去掉,若这条数据在左侧表格当前页存在,则触发el-table的toggleRowSelection(row,false)方法,取消勾选。设置选中方法,先清空左侧表格原有选中数据,然后根据右侧表格所有选中数据的id(自己设定的key)来判断右侧表格当前页是否存在选中数据,存在则调用el-table的toggleRowSelection方法,将数据勾选上。左侧表格为点击查询调用接口查询出来的数据,右侧表格为左侧表格所有选择的数据,由前端实现分页。原创 2023-12-08 19:05:03 · 1925 阅读 · 0 评论 -
vue 修改 this.$confirm 的文字样式、自定义样式
四、使用 customClass 设置MessageBox 的自定义类名,从而自定义样式。二、createElement 新建元素和对象,然后对新建的元素进行标签化设置。但偶尔也需要修改文字等样式,这时该怎么做呢?就会被当作 HTML 片段处理。属性设置为 true,原创 2023-12-01 10:46:55 · 6187 阅读 · 0 评论 -
vue 文字超长显示...鼠标悬浮显示全部组件封装
vue 文字超长显示...鼠标悬浮显示全部组件,封装el-tooltip。原创 2023-11-28 10:31:27 · 823 阅读 · 0 评论 -
记录 npm i 换成 pnpm i 后,导致element表格align等属性不生效,el-table样式错乱,少了class “el-table__cell“的问题
npm i 换成 pnpm i 后(package-lock.json 变成 pnpm-lock.yaml),导致element表格align等属性不生效,el-table样式错乱,如图: 把element升级到最新版本:原先的版本为"element-ui": "^2.15.1",升级到最新版本:"element-ui": "^2.15.14",成功解决问题。原创 2023-11-23 11:16:22 · 201 阅读 · 0 评论 -
使用u-table/ux-grid虚拟滚动解决el-table数据量大渲染卡的问题、及表格根据浏览器大小动态调整高度问题
u-table的使用方法和el-table没什么区别。这里必须加的两个属性,不加的话无法实现虚拟表格,页面一样会卡死,第一个,use-virtual 开启虚拟滚动,第二,个 height 必须限制高度,这两个不加就是普通表格,加了之后就是虚拟表格。若想根据浏览器大小动态设置表格高度,可以通过vuex将屏幕大小的数据存储起来,通过监听屏幕大小,动态设置表格高度。新建umy-ui.scss文件,并引入。表格高度根据浏览器屏幕高度变化。原创 2023-06-13 17:58:01 · 5209 阅读 · 0 评论 -
el-select 选项文字超长解决方案
2、:popper-append-to-body="false" 将 el-select 选项的内容移动 div#app 当中。2、样式不加 scoped, 设置 display: block;要点: 1、popper-class="my-select" 设置自定义class。要点: 1、popper-class="my-select" 设置自定义class。二、超长省略号显示,鼠标悬浮显示全部。原创 2023-05-29 14:42:25 · 4539 阅读 · 0 评论 -
vue 封装搜索查询组件
封装search组件原创 2023-05-18 18:03:33 · 1928 阅读 · 0 评论 -
封装el-select,实现虚拟滚动,可单选、多选、搜索查询、创建条目
表单中某下拉框,由于数据过多,选择的时候会因为数据量过大导致页面卡顿,于是对于el-select进行二次封装,实现虚拟滚动。看起来是加载了全部数据,实际上只加载了自己设定的10条(可修改)数据。concatSymbol 拼接 label 和 value 的符号。isConcat 是否拼接 label 和 value。isRight 是否右边显示value(code)值。二、el-option-node.vue。三、utils index.js。Step2: 创建两个文件。一、Select.vue。原创 2023-05-18 17:31:03 · 6999 阅读 · 4 评论 -
vue 封装月份多选组件
element el-date-picker 还没有 type="months" 可以选择多个月份的功能。现在若想选则多个月份,可直接使用element。本文仅对之前写的月份组件做个记录。一、直接使用el-date-picker type="months"1、新建组件 SelectMonths.vue。2、使用组件 SelectMonths。原创 2023-05-18 16:44:20 · 2397 阅读 · 5 评论 -
限制输入框输入(数字、小数点、负号)
限制输入框输入(数字、小数点、负号),只能输入数字,允许输入小数点和负号,且只能输入两位小数(正数、负数、0),若输入中文后,在输入正确的值,值没有变化、显示上一次的值,可在@change中传入$event原创 2022-12-05 10:58:01 · 1958 阅读 · 2 评论 -
记录el-table 编辑,复制、删除,前端分页等操作
el-table 编辑等操作。原创 2022-11-25 17:56:11 · 835 阅读 · 0 评论 -
el-table 选择列合计,fixed固定某列,合计行放在表格上方,设计合计行样式
选择特定的几列进行合计,并将el-table的合计行放在表格上方,并修改合计行样式。关键代码:show-summary :summary-method="getSummaries" ;不写summary-method方法,默认计算所有数字列原创 2022-11-25 14:47:42 · 3579 阅读 · 6 评论 -
vue element-ui DateTimePicker 设置开始时间小于结束时间
【代码】vue element-ui DateTimePicker 设置开始时间小于结束时间。原创 2022-09-22 17:08:02 · 977 阅读 · 0 评论 -
Element-UI el-select 多选菜单换行撑开
Element-UI el-select 多选菜单换行撑开显示破坏整体样式。若出现滚动条样式不好看,可以更改样式,和elementui保持一致。原创 2022-09-22 12:05:08 · 1444 阅读 · 0 评论 -
el-table 内容太多 show-overflow-tooltip 显示不下,闪烁抖动不显示
方法一: el-popover 代替 show-overflow-tooltip。el-popover样式需要放在不含scoped的style样式中,为了防止污染全局el-popover样式,要给el-popper添加类名:popper-class="XXX" 方法二:使用 show-overflow-tooltip超过一定的行数显示。原创 2022-09-21 18:44:15 · 7806 阅读 · 0 评论