Element UI
文章平均质量分 60
Element UI
朝阳39
钟爱编程,偏前端开发,欢迎私信我加入EC尽享编程俱乐部共同学习,交流成长!
展开
-
el-select 支持拼音搜索(含插件 pinyin-match 的使用)
/ matchResult 的值为 true/false。原创 2023-12-27 10:36:20 · 834 阅读 · 0 评论 -
el-select 全选
【代码】el-select 全选。原创 2023-12-20 15:49:15 · 475 阅读 · 0 评论 -
Element UI 密码输入框--可切换显示隐藏,自定义图标
【代码】Element UI 密码输入框--可切换显示隐藏,自定义图标。原创 2023-10-20 10:18:13 · 1173 阅读 · 0 评论 -
Element UI 表格【列宽自适应】
<template> <div class="page"> <el-table border style="width: 100%" :data="tableData"> <el-table-column v-for="(item, index) in tableTitleList" :key="index" :label="item.label" :type="item.ty原创 2023-04-07 16:05:22 · 1570 阅读 · 0 评论 -
纯前端导出表格数据 -- csv格式 (含表格末尾的自动合计行)
核心代码详见代码中的备注<template> <div class="page"> <el-button type="primary" size="small" @click="exportOut">导出</el-button> <div class="tableBox"> <el-table :data="tableData" border :summary原创 2023-03-30 16:57:06 · 1468 阅读 · 0 评论 -
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑原创 2023-03-07 16:33:17 · 812 阅读 · 0 评论 -
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容原创 2022-12-06 17:13:29 · 583 阅读 · 0 评论 -
element UI 组件封装--搜索表单(含插槽和内嵌组件)
轻松创建搜索表单原创 2022-11-22 09:44:33 · 1187 阅读 · 1 评论 -
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
在表单中,可能部分表单项需封装成自定义组件,如何在表单提交时,能同步触发自定义组件的表单校验?原创 2022-11-21 15:44:31 · 1241 阅读 · 1 评论 -
element UI 中多行消息提示的实现(this.$message的换行)
要点: 将 message 当作 HTML 片段处理原创 2022-10-21 16:37:56 · 2403 阅读 · 0 评论 -
Element UI 带快捷编辑的多行输入框(含光标位置的获取和指定)
光标位置的获取和指定详见代码中的注释原创 2022-09-21 20:33:31 · 1915 阅读 · 1 评论 -
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
超实用哦!原创 2022-09-21 19:46:33 · 1336 阅读 · 0 评论 -
vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
点我在线预览监听键盘事件根据按键值判断输入是否正确,若正确则添加属性 type 为 success ,字符变绿 ;输入错误则添加属性 type 为 danger,字符变红 (type 值来自 el-tag 对应的效果)当前关的字符输入完后,按任意键都会判定通关结果,输入全部正确才能通关判定结果后,按回车键/空格键,若通关则开始下一关,若失败则重新挑战为提升用户体验,每一次输入都会配音效,并统计输入正确和错误的次数element UI 需升级到 2.15原创 2022-07-27 16:41:26 · 484 阅读 · 0 评论 -
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
常见报错原因解析和解决方案分享原创 2022-07-27 14:30:51 · 2720 阅读 · 2 评论 -
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
本方案仅供快捷实现数据的翻页多选,不支持翻页多选数据的反显,若想支持翻页多选数据的反显,请参考全能版UID 为 data() 中定义的唯一标识符,原创 2022-07-26 17:20:58 · 438 阅读 · 0 评论 -
Element UI 多选表格【翻页多选】全能版(含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案)
selection-change 的参数为当前页选中的所有行,在每次重新获取数据渲染表格时(如翻页时),参数为一个空数组,会导致历史选中的数据被清空!即便使用 来保留历史选中记录也无法达到预期效果。toggleRowSelection失效通常为以下两种情况:(1)表格数据发生变化,表格还没渲染完便执行了toggleRowSelection解决方案 : 在 $nextTick 中执行 toggleRowSelection(2)toggleRowSelection的第一个参数不是表格源数据即便数据的值完全一原创 2022-07-26 16:42:08 · 4630 阅读 · 4 评论 -
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
监听手动勾选数据行的 Checkbox时触发的select事件,根据参数 rows 和 row 计算出勾选操作为选中还是取消选中。原创 2022-07-22 18:00:54 · 2795 阅读 · 0 评论 -
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
问题描述同时弹出消息弹框和对话框时,消息弹框被对话框遮挡问题原因element UI默认给$message消息弹框动态添加的z-index值比对话框小解决方案给 $message 添加自定义样式this.$message({ message: "我是消息", customClass: "myMessageClass" });划重点:必须是全局style,不能有scoped<style >/* 必须是全局style,不能有scoped */.myMessageC.原创 2022-01-27 21:48:37 · 3132 阅读 · 1 评论 -
vue + element-UI 图片压缩canvas【详解】(含完整demo)
原理详解图片压缩参数压缩图片的大小主要通过两种方式:改变图片的尺寸–缩小宽度和高度降低图片的清晰度此demo中可以输入相关参数完整代码<template> <div class="container"> <h2>图片压缩</h2> <h3>1.设置图片压缩参数</h3> <el-collapse> <el-collapse-item .原创 2021-12-17 18:28:38 · 2211 阅读 · 0 评论 -
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
<el-table-column label="拨打结果" width="180" align="center"> <template slot-scope="scope"> <el-row v-for="(phoneInfo, index) in scope.row.phoneInfoList" :key="index" > ...原创 2021-10-22 16:06:48 · 3736 阅读 · 0 评论 -
Element UI 数字输入框的实现
开发中经常有限制只能输入指定精度的数字的输入框的需求,使用el-input并不方便,推荐使用 el-input-number<!-- 只能输入0-100的整数的数字输入框 --> <el-input-number :controls="false" v-model="num" :min="0" :max="100" :precision="0" ></el-input-number>原创 2021-10-20 16:35:28 · 6448 阅读 · 0 评论 -
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
<template> <div style="margin:20px"> <el-row> 禁止选择过去日期(不能选择今天) <el-date-picker v-model="date1" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" .原创 2021-10-15 15:23:01 · 2272 阅读 · 0 评论 -
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
问题描述el-input上添加autofocus并没有自动聚焦的效果 <el-input autofocus v-model="word" ></el-input>解决方案<el-input ref="inputRef" v-model="word"></el-input> mounted() { // 在input输入框被渲染完毕后再获取焦点 this.$nextTick(() => { // 使用.原创 2021-10-11 22:05:54 · 1710 阅读 · 0 评论 -
Element UI 按需引入(含CollapseTransition)
官网https://element.eleme.cn/#/zh-CN/component/quickstartmain.js中原创 2021-06-19 12:41:45 · 1711 阅读 · 0 评论 -
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
el-datetime-picker-before.vue<template> <div> <el-date-picker value-format="yyyy-MM-dd" @change="dateChange" :size="size" :picker-options="da...原创 2021-05-26 10:43:55 · 1341 阅读 · 0 评论 -
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
官网并未提供相关的方法,但可以使用下方代码实现:this.$refs.树的ref值.store.nodesMap[指定节点对应的key值].expanded = true;参考范例 <el-tree ref="menuTree" :data="menuTreeData" node-key="label" />"menuTreeData":[ { "label": "前端三剑客", "children": [ { "lab原创 2021-05-21 11:26:46 · 12348 阅读 · 2 评论 -
Element UI 源码改造 —— 自定义数字输入框的实现
目录需求描述实现方案完整代码范例1. 找到Element UI源码中的el-input-number对应的文件2. 新建文件newElNumberInput.vue3. 在目标文件中引入使用4. 最终效果友情提示需求描述表单中需要一个数字输入框,功能与 el-input-number 基本一样,但有以下区别:1. 按上下方向键时,不改变输入的内容2. 输入的值超出最大值或小于最小值时,保留输入的值,而不是当失去焦点时自动替换为最大或最小值3. ...原创 2021-05-13 14:27:23 · 1509 阅读 · 2 评论 -
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
<template> <div style="padding: 20px"> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" v-if="dialogVisible" width="60%" > ...原创 2021-05-07 18:49:04 · 1030 阅读 · 0 评论 -
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
场景描述某班级共100个学生,现需录入学生信息,录入学生姓名时,页面上显示学生姓名,但传给后端的是学生的学号常见误区很多人第一反应是使用带输入建议的输入框 el-autocomplete 实现,但el-autocomplete的绑定值和显示值无法分离。所以,此种显示和绑定值分离的情况,应使用可筛选的下拉列表实现,即带filterable属性的el-select完整范例<template> <div style="padding: 20px"&..原创 2021-04-12 09:47:21 · 1822 阅读 · 0 评论 -
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
el-form 表单<el-form ref="formRef" :model="formData" label-width="80px" size="mini"> <el-form-item label="姓名" prop='name' :rules="{ required: true, message: '不能为空'}" > <el-input v-mode.原创 2021-03-02 18:27:10 · 3781 阅读 · 2 评论 -
Element UI 表格数据格式化
无插槽时的数据格式化无插槽的情况下,使用 el-table-column 的formatter属性,可以格式化指定列的值<el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column> methods: { formatter(row, column) { return “深圳市” + row.a.原创 2021-03-02 10:51:24 · 3493 阅读 · 0 评论 -
Element UI表格拖拽(vue中) —— 行拖拽、列拖拽
目录安装依赖 vuedraggable实现拖拽的要点行拖拽要点列拖拽要点完整范例代码安装依赖 vuedraggable安装vuedraggable 的同时,会自动安装sortablejsnpm i -S vuedraggable或直接安装sortablejsnpm install sortablejs --save实现拖拽的要点使用class为draggable 的div 包裹整个表格,以便拖拽代码中,准确抓取到拖拽元素的父容器......原创 2021-02-25 15:50:39 · 18456 阅读 · 12 评论 -
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
el-scrollbar 滚动条组件用于优化页内滚动条的UI效果,使用时必须指定高度!/*el-scrollbar 必须指定高度*/.scrollMenuBox { height: 200px; width: 100px; border: 1px solid red;}控制el-scrollbar内滚动条的方法与控制页面的滚动条的方法基本一样,只是获取el-scrollbar节点的滚动条时,需使用 this.$refs.scrollMenuRef.wrap<.原创 2021-02-20 07:05:51 · 46541 阅读 · 3 评论 -
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
问题描述Element UI 中的下拉弹窗是通过在整个body标签末尾动态添加div实现的,所以修改样式时,必须要定义全局样式才能实现样式覆盖,那怎样才能避免全局的样式污染呢?解决方案通过给组件添加自定义的 popper-class 属性来避免全局样式污染<el-cascader popper-class="myClass" v-model="regionCodeList" :props="props"></el..原创 2021-02-19 11:40:40 · 2098 阅读 · 0 评论 -
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
目录必要准备1. 查询行政区划的接口2. 在vue.config.js 中配置接口代理范例1 —— 级联选择行政区划(可以选择任意一级)范例2 —— 限制行政区划的显示和选择范围范例3 —— 获取选中行政区划的名称必要准备1. 查询行政区划的接口可以使用高德提供的APIhttps://developer.amap.com/api/webservice/guide/api/district/获取高德开发的key 的方法,详见博客 **2. 在......原创 2021-02-05 20:43:14 · 7977 阅读 · 1 评论 -
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
手动上传:auto-upload="false"this.$refs.upload.submit();选择文件时,限定文件类型 accept=".xlsx,.xls"选择文件时,限制文件总数:limit="1"超出文件总数时,触发:on-exceed='limitCheck'// 选择的文件超出限制的文件总数量时触发limitCheck() { this.$message.warning('每次只能上传一个文件')},文件....原创 2021-02-04 20:48:05 · 13729 阅读 · 6 评论 -
el-tree 动态指定默认选中节点
核心代码 highlight-current 高亮选中节点 node-key="label" 指定以哪个属性为唯一识别的 key :current-node-key="current" 自定义current变量,存储默认选中节点对应的key值 v-if="current" 因是动态绑定,最开始current为空,所以需在current有值后,才渲染 el-tree 完整演示代码<template> <el-tree.原创 2020-12-24 09:10:59 · 8843 阅读 · 1 评论 -
Element UI 自定义环形进度条里的内容
实现思路1.隐藏进度条默认的文字内容 :show-text="false"2. 使用“子绝父相”,调整top和left值来实现自定义内容在环形进度条内居中3. 为避免缩放浏览器时定位发生偏移,需固定整个容器的宽度width: 200px;最终代码<div class="circleBox"> <el-progress :show-text="false" :width="120" :stroke-width="12" type="circ...原创 2020-12-08 15:38:16 · 6944 阅读 · 0 评论 -
vue 弹窗翻页多选
最终效果点选择按钮后,弹出选择用户弹窗,可翻页勾多个用户完整代码<template> <div> <el-button size="small" type="primary" @click="choose">选择</el-button> <p> <el-tag v-for="(item,index) in allSelectedUserList" ..原创 2020-11-27 21:51:39 · 1426 阅读 · 1 评论 -
el-input 模糊匹配 - 单行输入
原创 2020-10-23 15:29:35 · 333 阅读 · 0 评论