分类：element

2021
06-23

Vue Element前端应用开发之开发环境的准备工作

概述之前一直采用VS进行各种前端后端的开发，随着项目的需要，正逐步融合纯前端的开发模式，开始主要选型为Vue+Element进行BS前端的开发，后续会进一步整合Vue+AntDesign的界面套件，作为两种不同界面框架的展现方式。采用Vue+Element的前端开发和之前的开发模式需要有较大的转变，以及需要接触更多的相关知识，本系列随笔基于循序渐进的学习研究方式，对使用Vue+Element这种前端开发的各个方面进行一个完整的介绍，并... 继续阅读 >

2021
06-13

通过Element ui往页面上加一个分页导航条的方法

需求加入一个分页条，此分页条可以跳转页面，可以根据页码选择具体页面，可以设置当前页面的大小。在elementui官网选择Pagination分页组件进入elementui官网，然后选择一个合适的分页组件，如下图：UserList.vue组件的template模板中的分页组件的代码和效果分页组件的代码如下图：分页组件的效果如下图：分页组件牵涉到的data数据和methods方法分页组件牵涉到的data数据如下图：分页组件牵涉到的methods方法如下图：测试首先进入... 继续阅读 >

2021
04-27

vue + element ui实现播放器功能的实例代码

没有效果图的展示都是空口无凭1.基于audio并结合elementUI的进度条实现2.实现了播放器基本的功能，播放/暂停、快进、静音、调节声音大小、下载等功能html代码，关键部分已加注释<divclass="rightdimain-wrap"v-loading="audio.waiting"><!--此处的ref属性，可以很方便的在vue组件中通过this.$refs.audio获取该dom元素--><audioref="audio"class="dn":src="url":preload="audio.preload"@play="onPlay"@e... 继续阅读 >

2021
04-07

vue基于Element按钮权限实现方案

背景需求：ERP系统需增加”按钮权限控制“功能，对权限的控制粒度要普及到按钮层级。预期按钮权限控制的交互方式无非两种："不可见"和"可见不可点"。不可见不可见的交互方式相对简单，我们可使用v-if控制其是否显示。使用v-show也行，但不够保险，毕竟v-show只是把样式改成display:none，在真实的DOM渲染还是存在的，所以更推荐v-if来控制不可见。可见不可点“看是能看了，但你不行了”。样式控制（得加个禁用样... 继续阅读 >

2021
03-16

element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)

项目需求是:选择日期和时间,只能选择当前时间以后的时间,禁用最小级别到分钟.有两种选择1.使用DateTimePicker日期时间选择器.2.DatePicker和TimePicker组合使用这里我是用的是第二种方法,最主要的属性是picker-options<el-date-pickerv-model="formInline.inventoryDate"type="date"align="right"placeholder="请选择日期":picker-options="pickerOptions"value-... 继续阅读 >

2021
03-16

解决element DateTimePicker+vue弹出框只显示小时

三个知识点：1.css后代选择器https://www.w3school.com.cn/css/css_selector_descendant.asp2.vue深度选择器https://vue-loader.vuejs.org/zh/guide/scoped-css.html3.elementuiDateTimePicker指定下拉框类名 popper-classhttps://element.eleme.cn/#/zh-CN/component/datetime-picker在搞清楚上述三个知识点的前提下，在vue页面的全局样式中（即不带有scoped标记的style标签中），利用css后代选择器+vue深度选择器可以... 继续阅读 >

2021
03-11

Vue模仿ElementUI的form表单实例代码

实现要求模仿ElementUI的表单，分为四层结构：index组件、Form表单组件、FormItem表单项组件、Input和CheckBox组件，具体分工如下：index组件：实现：分别引入Form组件、FormItem组件、Input组件，实现组装；Form表单组件：实现：预留插槽、管理数据模型model、自定义校验规则rules、全局校验方法validate；FormItem表单项组件：实现：预留插槽、显示label标签、执行数据校验、显示校验结果；Input和C... 继续阅读 >

2021
03-05

vue3.0中使用element的完整步骤

前言：      在vue3.0中使用element框架，因为element是支持vue2.0的，他推出的支持vue3.0的版本叫 element-plus官网入口：点我进入一、个人遇到的问题与解决办法：遇到的问题：我直接用cnpm i element-plus -S装的版本，不知道为啥，一直报错图1，版本型号图2，我的代码中使用图3解决办法：我把package.json中的element-plus的版本更换成  下面这句话，解决... 继续阅读 >

2021
02-21

如何封装Vue Element的table表格组件

在封装Vue组件时，我依旧会交叉使用函数式组件的方式来实现。关于函数式组件，我们可以把它想像成组件里的一个函数，入参是渲染上下文(rendercontext)，返回值是渲染好的HTML(VNode)。它比较适用于外层组件仅仅是对内层组件的一次逻辑封装，而渲染的模板结构变化扩展不多的情况，且它一定是无状态、无实例的，无状态就意味着它没有created、mounted、updated等Vue的生命周期函数，无实例就意味着它没有响应式数据data和this上下文... 继续阅读 >

2021
02-02

Element el-button 按钮组件的使用详解

1.背景按钮是很常用的，Element的按钮功能还是比较全面的，本篇就来介绍下。先看下各种按钮的效果图：在分析源码前，我们先来看一下官方文档对于button的使用说明：2.按钮分类el-button按钮的分类基本是靠颜色区分的，另外还有一种文本按钮type="text"，文本按钮由于比较小，比较适合用于表格每行的操作栏部分。按钮分类：<el-button>默认</el-button><el-buttontype="primary">primary</el-button><el-buttontype="succ... 继续阅读 >

2021
01-22

Element-ui upload上传文件限制的解决方法

问题在accept中添加上传文件的类型只能起到“表面”作用，选择“所有文件”之后，还是可以上传任何类型的文件，根本起不到限制作用。解决办法在before-upload（上传文件之前的钩子，参数为上传的文件，若返回false或者返回Promise且被reject，则停止上传。）钩子里去做判断。这里有一个坑，当你设置了:auto-upload="false"的时候，这个钩子是不会被触发的，因此也可以在on-change中做判断。上代码//:before-upload或者:on-... 继续阅读 >

2021
01-22

动态实现element ui的el-table某列数据不同样式的示例

问题描述在饿了么ui的框架中，输入数据el-form，输出数据el-table。有时候产品想让枯燥的表格来点动态的样式，比如不同的内容展示不同的样式，对于这个需求，其实方式有很多种，本文列举两种，以供参考。实现方式一效果图如下代码如下<template><divid="app"><!--需求：三国人物表格，要求不同的国别展示不同的颜色（魏国红色、蜀国黑色、吴国蓝色）--><el-table:data="tableData"style="width:100%"><el-table-colu... 继续阅读 >

2021
01-21

element el-table表格的二次封装实现(附表格高度自适应)

前言在公司实习使用vue+element-ui框架进行前端开发，使用表格el-table较为多，有些业务逻辑比较相似，有些地方使用的重复性高，如果多个页面使用相同的功能，就要多次重复写逻辑上差不多的代码，所以打算对表格这个组件进行封装，将相同的代码和逻辑封装在一起，把不同的业务逻辑抽离出来。话不多说，下面就来实现一下吧。一、原生el-tbale代码——简单の封装这里直接引用官方的基础使用模板，直接抄过来(✪ω✪)，下... 继续阅读 >

2021
01-17

vue element el-transfer增加拖拽功能

芯资管项目要求el-transfer增加拖拽排序，左右上下互相拖拽功能；原来的组件不支持拖拽，这里要用个第三方脱宅组件sortablejs首先安装sudonpmisortablejs--save-devhtml代码<template><el-transferref="transfer"id="transfer"v-model="value":data="data"><spanslot-scope="{option}":draggable="!option.disabled"@dragstart="drag($event,option)">{{option.key}}-{{option.label}}</span></el-tr... 继续阅读 >

2021
01-14

vue+element table表格实现动态列筛选的示例代码

需求：在用列表展示数据时，出现了很多项信息需要展示导致表格横向特别长，展示就不够明晰，用户使用起来可能会觉得抓不住自己的重点。设想实现：用户手动选择表格的列隐藏还是展示，并且记录用户选择的状态，在下次进入该时仍保留选择的状态。效果图如下：原：不需要的关掉默认的勾选：实现代码：HTML部分就是用一个多选框组件展示列选项用v-if="colData[i].istrue"控制显示隐藏，把列选项传到checkbox里再绑定勾选事件。<el-popo... 继续阅读 >

2021
01-14

vue element和nuxt的使用技巧分享

1.element的时间选择提交的格式转化例如FriSep07201800:00:00GMT+0800(中国标准时间)转化为2020-01-11的格式这记载datepicker中添加一句value-format=”yyyy-MM-dd”<el-date-pickertype="date"v-model="createdate"@change="formatTime"value-format="yyyy-MM-dd"placeholder="选择时间"></el-date-picker>2.动态循环复选框时，无法选中问题this.menulist[index].sonList.map((item)=>{this.$set(item,'checked',... 继续阅读 >