+ ElementUI
null
王佳斌
商务合作请私信
展开
-
ElementUI - 改变 <el-tabs> 选项卡(标签页)组件标题文字大小 / 去除底部灰色线条
前言官网默认的例子文字比较小,希望将文字调大,如下图所示:解决方案官方文档:https://element.eleme.cn/#/zh-CN/component/tabs使用 /deep/ 深度选择器,配合 !important ,轻松覆盖样式,打开标签页组件所在页面,插入以下 css 代码即可:/deep/.el-tabs__item { /* 修改为您想要的文字大小 */ font-size: 20px!important;}...原创 2022-04-07 10:44:30 · 6927 阅读 · 2 评论 -
ElementUI - <el-input> 组件监听回车键(事件)
前言这种需求常见于搜索框,用户可以点击按钮,也可以输入框内直接回车键触发搜索。ElementUI 文档中似乎没有提到过监听回车事件,解决方案XXX 即为您要触发的函数。@keyup.enter.native="XXX()"使用示例以下示例,搭配搜索框及按钮:<!-- 触发函数一致即可 --><el-input @keyup.enter.native="search()"> <el-button @click="search()">原创 2022-03-22 12:11:11 · 4078 阅读 · 0 评论 -
ElementUI - Backtop(回到顶部)组件使用方法
前言官方的示例描述的不太清楚,很多朋友直接复制发现并不生效。如下图所示效果,可做成 全部页面生效 或 某个单独页面 生效。解决方案注意:我这里搞成了全局(所有页面都会生效),直接放在了 App.vue 了。打开 App.vue ,复制以下代码:<!-- 样式您可以自行调整 --><!-- 一些其他配置属性参考官网 --><el-backtop :bottom="30"> <div style="{ height: 100%;原创 2022-03-18 15:01:22 · 2425 阅读 · 2 评论 -
ElementUI - <el-table> 表格 selection 设置的复选框禁止选中某些行
前言当表格设置 selection 开启复选框可选时,您可能需要禁用一些 业务条件成立 的行数据。例如,禁用表格中所有 地址 为 秦皇岛市海港区居民 的行数据,复选框无法选中,如下图所示效果:实现方法表格文档:https://element.eleme.cn/#/zh-CN/component/tableElementUI 提供了该需求的解决方案,上述文档连接中打开搜索 selectable 。该属性接收一个函数,您只需要在函数中做出判断,返回 ture / false 即可确定该行原创 2021-07-23 11:01:22 · 11552 阅读 · 4 评论 -
ElementUI - 手动关闭 messageBox 实例弹框
前言ElementUI - message Box文档 : https://element.eleme.cn/#/zh-CN/component/message-box后端会验证前端所有的请求,当登录已超时会返回相关的状态码,前端拿到登录超时的状态码时要弹出一个 MessageBox 弹框用于提示用户,假设一个页面加载时触发多个请求后,当用户登录超时后,会弹出两个 MessageBox 弹框。关闭一个之后会跳到登录页,到登录页之后还会看到 N(请求有几个) 个 MessageBox 弹框。那么如何原创 2021-07-02 14:46:58 · 5245 阅读 · 0 评论 -
ElementUI - <el-select> / <el-option> 如何选中后返回多个数据 / 整个item
前言<el-select> 组件文档:https://element.eleme.cn/#/zh-CN/component/select大部分情况下,<el-option> 会配置 lable 属性用于展示,而 value 则是选中后返回的数据。但是,value 只能返回单个数据,并不能返回多个参数(或整个 item 对象)。<!-- 只能返回某个数据(item.id) --><el-select v-model="selectedDevice">原创 2021-06-24 11:44:11 · 4890 阅读 · 2 评论 -
ElementUI - 表格组件(el-table)数据发生改变时视图不刷新渲染问题解决方案
前言mqtt 做实时数据传输页面时,发现 数据变了但视图没变。el-table 表格组件,每次只能监听整个 row 的变化,仅是 row 中某个属性变化无法追踪(需要重新给 table 中的某一行赋值)。解决方案vue.set() API(官方文档):https://cn.vuejs.org/v2/api/#Vue-set使用 vue.$set() 方法,触发视图更新即可。/* * target: 要更改的数据源(可以是对象或者数组) * key:要更改的具体数据 * value :重原创 2021-06-18 15:24:02 · 12859 阅读 · 0 评论 -
ElementUI - <el-image> src 属性使用本地图片加载失败解决方案
前言如下代码所示,会造成加载失败:<el-imagestyle="width:50px; height:50px;"src="../assets/banner.png"/>解决方案使用 require 引入即可。<el-imagestyle="width:50px; height:50px;":src="require('../assets/banner.png')"/>...原创 2021-06-07 16:54:27 · 5086 阅读 · 4 评论 -
ElementUI - 全局loding加载自定背景图或颜色(指令方式)
前言ElementUI 组件文档:https://element.eleme.cn/#/zh-CN/component/loading默认情况下,默认为白色半透明背景,想要自定义如下图所示效果:解决方案在当前页面加入以下代码。.el-loading-mask{ background: red !important; /* background-image: url() */}...原创 2021-05-10 11:05:46 · 2469 阅读 · 2 评论 -
ElementUI - checkbox 复选框背景透明或其他颜色(样式覆盖)
前言ElementUI 默认为白色背景。有时候,我们需要一个透明背景的 checkbox 复选框(与背景衔接),如下图所示:解决方案注意 <style> 标签添加 lang=“scss”,否则无效。采用覆盖样式方法,想自定义其他样式都在 .el-checkbox__inner 类中。.el-checkbox__inner{ background: rgba( #000000, 0)!important;/* 透明 */ /* background:red原创 2021-05-08 14:21:21 · 3620 阅读 · 0 评论 -
ElementUI - input 框组件设置自定义边框及渐变边框(样式覆盖)
前言有时候,我们需要自定义组件的边框,如渐变色边框下图所示:解决方案注意 <style> 标签添加 lang=“scss”,否则无效。采用覆盖样式方法,想自定义其他样式都在 .el-input__inner 类中。/* 渐变边框 */.el-input__inner{ border-image:linear-gradient(to right,#000718,#23b7cb) 5 5!important; /* 自定义其他样式时 注意加 !important 安原创 2021-05-08 11:18:42 · 4093 阅读 · 0 评论 -
ElementUI - input 框组件设置透明背景(样式覆盖)
前言有时后,input 框可能需要设置为透明背景来与大背景图融合,如下图所示:解决方案注意 <style> 标签添加 lang="scss",否则无效。覆盖样式即可。<style lang="scss">.el-textarea__inner,.el-input__inner { background: transparent;}...原创 2021-05-08 11:02:44 · 11230 阅读 · 9 评论 -
ElementUI - 自定义全局主题颜色及主题颜色切换(最简洁的方式 | 利用 element-variables.scss)
效果图简介实现了自定义全局主题颜色及主题颜色切换,利用 element-variables.scss 最简洁的方式。该项目是一个由 vue-cli 创建的干净项目,只配置了 ElementUI 环境和示例代码,标注了更改和新增的代码。运行# 安装依赖npm i# 运行查看npm run serve改了哪些文件方便你进行查看及使用。根目录新增了 element-variables.scssmain.jsApp.vue...原创 2021-05-06 16:19:18 · 2488 阅读 · 0 评论 -
ElementUI - 自定义全局 Loading 加载动图 spinner(不使用内置图标而是自定义动态图)
前言ElementUI Loding 组件文档:https://element.eleme.cn/#/zh-CN/component/loading默认的样式如下图所示,更改加载图标为动态的 GIF 图片。改为自定义动图,但要注意 底部的提示文字不能再使用了。实现使用 服务方式 ,不要使用指令方式。如下样式,便可覆盖样式达到效果,具体在什么地方使用请看最下面的 示例。.el-loading-spinner .circular{ width: 42px; height: 4原创 2021-04-30 16:48:47 · 10205 阅读 · 2 评论 -
Element UI官网垂直导航栏demo去掉右侧横线
前言今天在 Element UI官网使用这个demo时,发现侧边有一条横线,如图:解决方法.el-menu { border-right:0!important;}为了更好的覆盖成功,使用 !important 可以有效解决。...原创 2019-10-24 09:01:26 · 5212 阅读 · 0 评论