![](https://img-blog.csdnimg.cn/20201130000809261.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Element
Element框架,是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。
aiguangyuan
要全身心的投入,程序才会有些感觉!
展开
-
Element 页面滚动表头置顶
在开发后台管理系统时,表格是最常用的一个组件,为了看数据方便,时常需要固定表头。如果页面基本只有一个表格区域,我们可以根据屏幕的高度动态的计算出一个值,给表格设定一个固定高度,这样表头就可以固定了。但是如果表格上面还有其它区域,这样动态计算出表格的高度时还要减去其它区域的高度,因此计算出的表格的高度就会非常小,看数据特别不方便,此时就不能给表格设置一个固定高度了,但是这样一页数据很多时,滚动页面到底部,表头就被滚动隐藏了,为了用户体验好一点......原创 2024-06-26 17:55:02 · 520 阅读 · 0 评论 -
Element 进度条样式优化
在开发后台管理系统时,经常会用到进度条这样一个控件,Element UI中提供了progress这样一个组件,该组件默认的颜色会比较单一,为此时常需要对该组件的样式进行一些优化,以满足实际项目的需求,上图是对该组件经过样式优化后的效果,下面提供代码供大家参考。原创 2024-06-21 10:52:39 · 326 阅读 · 0 评论 -
Element 中如何给表头添加提示
在前端开发中,有些地方由于版面不够或是为了进一步说明文字含意,经常会对页面展示的文字进行缩减,然后加一个鼠标悬停提示,以提升用户体验。上面这种用Element 的组件直接就可以实现,非常容易,但是如果要是在表头添加提示,提示还有多行文字如何实现呢?原创 2023-05-12 10:56:05 · 2862 阅读 · 2 评论 -
Element 中查询前多少天、前多少周、前多少月的数据
在开发后台管理系统时,经常会遇到这样一种需求,查询前多少天、多少周、多少月的数据,虽然 UI框架有自带的组件可以实现这些功能,但是操作起来却不是很方便,而且这些都是查询最近时间的数据,没有必要用日期组件,这种情况下就需要自己写了。功能的基本实现思路为:根据日、周、月分别定义三个下拉选项,选择不同的日期类型时,显示不同的日期下拉选项,默认为第一个下拉选项。原创 2023-02-02 19:58:58 · 374 阅读 · 0 评论 -
Eelement 中表头无法对齐解决办法
Eelement的表格有时候会遇到下面这种情况,表头对不齐,让页面看起来有一些瑕疵。解决办法是在App.vue里加上如下代码:<style> .el-table th.gutter { display: table-cell !important; }</style>......原创 2022-05-13 16:28:40 · 747 阅读 · 0 评论 -
Element 中图片预览时上一张和下一张的箭头如何调整到图片范围以内
最近在做一个文案管理系统,主要为公司的投放准备一个素材库,在做图片预览时领导提了出了一点要求:预览图片上一张和下一张时的箭头必须在图片范围以内,以便于运营人员操作。大家请看,之前的效果是这样的:上面预览的效果为el-image组件自带的点击预览,功能倒是达到效果了,不足的就是这两个箭头离图片太远了,甚至都不容易被发现,理想的效果应该是这个样子的:刚开始想的思路是:根据图片的地址动态的去生成一个img,在图片加载完成后获取图片的宽度,然后结合当前窗口的宽度来调整两个箭头的位置 。后面发现其原创 2022-03-08 18:02:12 · 895 阅读 · 0 评论 -
Element 中图片预览后如何快速关闭
Element 中的图片有预览大图的功能,但是预览完闭后只能点击右上角的关闭图标才能关闭,有点不方便,理想的操作应该是点击图片以外的遮罩层的任意位置即可关闭,只需要在页面加载完成以后加上如下代码即可实现:mounted() { // 通过遮罩层关闭图片预览 document.addEventListener('click',function(e){ if(e.target.className=="el-image-viewer__mask"){原创 2022-03-05 11:08:24 · 1459 阅读 · 0 评论 -
Element 中el-calendar取消点击事件
Element中的日历组件默认是有一个点击事件的,点击某一天,当前日历的日期会动态发生变化,相当于是在有限的表格内通过点击事件显示更多的日期,但是有时候我们并不想要这个点击事件,为了方便进行对比分析,想直接展示多个月的数据,那该怎么做呢?直接在日历组件上加上如下设置,就可以取消点击事件了。style="pointer-events:none"以下是代码示例:<template> <div class="app-container"> <d原创 2022-02-14 09:50:27 · 3422 阅读 · 2 评论 -
Element 中表单输入整数及两位小数
<template> <div id="platformActivity"> <el-form :model="formFieldsData"> <!-- 充值金额保留两位小数 --> <el-form-item label="充值金额" prop="money" label-width="120px"> <el-input .原创 2021-09-07 12:03:01 · 1053 阅读 · 0 评论 -
Element 后台管理系统实用表格布局
此篇本章提供 Element 在后台管理系统中开发的一点归纳总结,欢迎大家复制粘贴及吐槽!<template> <div> <div class="app-container"> <!-- 表格搜索 --> <div class="filter-container"> <div class="filter-left"> .原创 2021-08-06 11:11:43 · 1206 阅读 · 0 评论 -
Element 中表单输入小于1的小数
<template> <div> <el-form> <el-form-item label="返点" label-width="100px" > <el-input clearable autocomple.原创 2021-03-02 15:33:41 · 670 阅读 · 2 评论 -
Element 中时间选择器限定选择时间在某一个月内
<template> <div> <el-date-picker type="date" class="filter-item" placeholder="投放日期" value-format="yyyy-MM-dd" v-model="queryParam.drop_day" :picker-options=.原创 2021-03-02 11:11:52 · 1478 阅读 · 0 评论 -
Element 中根据屏幕大小动态计算表格高度以实现固定表头
在Element UI的表格组件中,要想固定表头,必须给表格指定一个高度,但是用户的屏幕大小是不一样的,为了能将表格底部的分页区域始终显示在屏幕内,就需要动态计算表格的高度。以下是代码实现:<template> <div class="table-container"> <!-- 1. 绑定动态计算的表格高度 --> <el-table :data="data" style="width:100%" :height=原创 2021-01-26 10:45:13 · 2036 阅读 · 0 评论 -
Element 中使用加载动画
<script>// 1.引入动画组件import { Loading } from 'element-ui';export default { name:"Index", data() { return { // 2.定义实例 loadingInstance:null, list:[] }; }, methods: { getDa.原创 2021-01-26 10:27:08 · 3168 阅读 · 0 评论 -
Element 中switch绑定值为0和1
switch开关经常用在是否启用的场合,但是switch默认绑定值的类型是布尔类型,即true和false,在实际的项目中,后端的接口都会用0和1来代替,如何将数值与状态进行关联呢?我们可以用active-value绑定要启用状态的值,用inactive-value绑定禁用状态的值,这两个值默认对应的是字符串类型。<el-table-column label="是否启用"> <template slot-scope="obj"> <el-sw.原创 2020-12-19 10:30:29 · 9218 阅读 · 2 评论 -
Element 中时间选择器配置 本月 及 上个月 快捷方式
Element-UI中的时间选择器代码示例没有提供本月及上个月的快捷选择方式,以下提供所需代码,方便大家使用。以下是要实现的效果图:以下快捷选择方式的配置代码:pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); }, shortcuts: [ { text: "今天", onClic..原创 2020-12-03 11:10:09 · 1472 阅读 · 0 评论 -
Element 中表格固定列后横向滚动条无法拖动的问题解决
在Element-UI中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条,解决的办法就是将固定区域底部留出一个滚动条高度的距离。如下图所示为对固定列区域调整后的效果图:下面是解决问题所需的代码:.el-table .el-table__fixed { height:auto !important; bottom:16px; }需要注意的是,上面的代码需要放在全局的样式文件中才有效果。......原创 2020-12-03 00:16:46 · 6277 阅读 · 6 评论 -
Element 多个相同类型的输入框共用一条校验规则
在Element中一个输入框对应一条校验规则,如果有多条相同类型的输入框想共用一条校验规则,如何实现呢?以下是代码实现(官网其实有介绍):<template> <div> <div class="book-input" v-for="(item,index) in current_list" :key="index"> <!-- prop的写法很重点 --> <el-form.原创 2020-12-01 18:02:40 · 3313 阅读 · 3 评论 -
Element 中使用 slot-scope 遍历二级数组
1. 当表格中的某一个属性值是数组对象时,如何遍历?<!-- list 为每个表格行中 的一个数组对象 --><el-table-column label="增长" width="600" prop="list"> <!-- scope名称随便取,代表整个表格数据 --> <template slot-scope="scope"> <div class="cell-class"> &l原创 2020-11-18 11:24:53 · 1595 阅读 · 1 评论 -
Element 禁止选择当前时间以后的天数,并限制查询天数
1. 添加选择限制pickerOptions<el-date-picker type="daterange" v-model="time_range" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOp...原创 2019-12-30 09:55:45 · 828 阅读 · 2 评论