分类：element

2020
10-08

详解Vue+elementUI build打包部署后字体图标丢失问题

错误描述：Vue+elementUI build打包部署后字体图标丢失，控制台显示文件element-icons.woff和element-icons.ttf文件404错误展现：控制台报错截图dom渲染展示解决方法：webpackmodule配置：(build目录下webpack.base.conf.js)module:{rules:[...(config.dev.useEslint?[createLintingRule()]:[]),{test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader:'url-loader',options:{l... 继续阅读 >

2020
10-08

Element图表初始大小及窗口自适应实现

最近在做一个轮播图，使用的是element的Carousel走马灯，每一个走马灯里是eachrts图，开始页面加载的时候发现echarts图并不能自适应，开始以为是走马灯的问题，后来发现不是不知道大家在用echarts的时候有没有遇到这种情况：最开始盛放图表的容器是隐藏（或者tab切换）的，然后再显示的时候，里面echarts图表就没用初始大小了。比如我遇到的这种：有童鞋这会儿估计看出原因了：因为元素最初隐藏，再显示之后没有自动变化宽度，所以... 继续阅读 >

2020
10-08

基于vue+element实现全局loading过程详解

项目中使用的是vue+element实现的全局loading1.引入所需组件，这里主要就是router和element组件，element组件引入可以参考element官网2.下面就是重点及代码实现了首先是全局的一个变量配置参数，代码如下：//全局页面跳转是否启用loadingexportconstrouterLoading=true;//全局api接口调用是否启用loadingexportconstapiLoading=true;//loading参数配置exportconstloadingConfig={lock:true,text:'Loading',spinne... 继续阅读 >

2020
10-08

详解element-ui动态限定的日期范围选择器代码片段

何开此题我是一个码农，缘起就是这次需求遇到了之前实现过的功能细节，不想再从头翻组件文档实现一遍，最好是直接拷贝粘贴。细节picker-options设定规则：时间范围最大可选择30天,最晚时间为今天。element-ui的日期选择器的组件是el-date-picker.设定pickerOptions2，data(){return{pickerOptions2:{disabledDate:theDate=>{constoneDay=3600*1000*24constcurrent=theDate.getTime()... 继续阅读 >

2020
10-08

基于Element封装一个表格组件tableList的使用方法

我们项目中使用的表格一般都比较类似，如果不进行封装的话，那么每个页面都可能有一些类似的代码。不仅浪费时间，而且由于开发人员不同的开发习惯。后期维护人员需要花费一点时间去看每个人的代码。所以我直接将表格做一个二次封装，只要一个人去维护这份代码即可。下面是我封装的内容内容：1、支持直接传入后台请求地址渲染列表，且参数修改之后自动刷新2、支持自定义每一列的显示3、支持根据内容自动撑开列宽4、支持动态筛选表头... 继续阅读 >

2020
10-08

vue+element实现图片上传及裁剪功能

本文实例为大家分享了vue+element实现图片上传及裁剪的具体代码，供大家参考，具体内容如下随便写的一个小demo功能是没有任何问题可能里面会有一些小细节没有优化 1、安装vue-croppernpminstallvue-cropper2、组件内使用import{VueCropper}from'vue-cropper'components:{VueCropper,},具体可见官网demo<template><div><h1>图片上传</h1><div><el-uploadclass="avatar-uploader"... 继续阅读 >

2020
10-08

vue+element-ui表格封装tag标签使用插槽

我们知道有很多系统都要求表格中添加各种各样的tag，来标记一些属性。在element-ui中添加tag很简单，最重要的就是用到了vue的插槽slot这个特性。首先了解什么是插槽。插槽省去官方的复杂讲解和代码，插槽的意思简单来说，就是在子组件的某个地方留一个占位符，当父组件使用这个子组件的时候，可以自定义这个占位符所占地方呈现的样子，可能是一个标题，一个按钮，甚至一个表格，一个表单。为什么要插槽呢？我们抽离组件的原因就是... 继续阅读 >

2020
10-06

浅谈element中InfiniteScroll按需引入的一点注意事项

大家为了节省空间，常常进行按需引入来节省空间，这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项。针对前面element按需引入的一些配置这里就不再详细介绍了。那么这里讲的是在main.js写入以下代码。import{InfiniteScroll}from'element-ui';Vue.use(InfiniteScroll)好，这样引入、注册了，那么我们接下来做得事情就是在页面使用它。<template><ulclass="infinite-list"v-infinite-scroll="load"style=... 继续阅读 >

2020
10-04

Vue + element 实现多选框组并保存已选id集合的示例代码

Vue+element实现列表复选框并保存已选id集合1.引用element组件多选框组，checkList为提交后台数据得数组，tableData为数据源2.初始化tableData集合3.循环遍历需要显示得值4.在多选框组上添加chang事件tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄'},{date:'2016-05-01',... 继续阅读 >

2020
09-29

基于element-ui封装可搜索的懒加载tree组件的实现

引言最近开发项目时遇到一个需求就是采用tree的方式展示以万为单位的数据，因为数据量大第一反应就是采用“懒加载”的方式实现，为了方便用户在庞大的数据量中快速定位到某个节点搜索功能也是必不可少的；因为采用“懒加载”数据，搜索当然也是远程搜索了；确定了需求当然第一时间就去网上找有没有小伙伴已经实现了相关组件，最后....,还是自己实现一个吧（由于公司采用的element-ui所以基于el-tree进行改造）；【这只是自己实现的... 继续阅读 >

2020
09-29

vue+Element中table表格实现可编辑（select下拉框）

最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的下拉框数据也是根据id动态生成的，内容不同；有点类似于树形二级状态，后面的下拉框数据来源并没有在前面内容里，而是另外一个接口查询，具体操作如下：HTML代码：1.在处理人列加入一个下拉框模板，其中v-model必须... 继续阅读 >

2020
09-29

element中el-container容器与div布局区分详解

用于布局的容器组件，方便快速搭建页面的基本结构：el-container：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列。el-header：顶栏容器。el-aside：侧边栏容器。el-main：主要区域容器。el-footer：底栏容器。以上组件采用了flex布局，elemen-ui官方文档链接：http://element-cn.eleme.io/#/zh-CN/component/container此外，el-container的子元素只能是后四者，后四者的父元素也只能是el-con... 继续阅读 >

2020
09-28

Element实现表格嵌套、多个表格共用一个表头的方法

一、分析需求这里先上一张图说明需求：根据后端返回的数据（res是一个数组，它的元素是一个对象，对象里面的ext属性是一个对象，它又包含了，default、free和pay三个属性，且这三个都是数组格式。）： 渲染出一个这样子的表格：res数据：res的每一个元素的直接属性name（即为邮费模板名称，比如成都运费模板），res的ext属性下的三个数组default、free、pay，每一个数组要大的一行（这一行中，... 继续阅读 >

2020
09-28

element-ui 实现响应式导航栏的示例代码

开始之前按照计划，前端使用Vue.js+ElementUI，但在设计导航栏时，发现element没有提供传统意义上的页面顶部导航栏组件，只有一个可以用在很多需要选择tab场景的导航菜单，便决定在其基础上改造，由于我认为实现移动端良好的体验是必须的，所以便萌生了给其增加响应式功能的想法。需求分析与拆解假设我们的导航栏有logo和四个el-menu-item。给window绑定监听事件，当宽度小于a时，四个链接全部放入右侧el-submenu的子菜单：当宽度... 继续阅读 >

2020
09-27

详解elementUI中input框无法输入的问题

最近发现别人项目中在输入密码的时候发现input框无法输入进去键盘都快敲坏了还是无法输入通过各种排查、还是无法解决这个问题后面无意中发现elementUI中@input事件可以拿到当前的输入的值问题找到了视图没有更新的问题那么怎么解决了 刷新通过this.$forceUpdate()可以解决这个问题这样的话这个问题就解决了 原因可能是由于组件嵌套太深（不是很了解为啥出现这个问题有没有大神解释一波）到此这篇关于详解elementUI... 继续阅读 >

2020
09-27

element 中 el-menu 组件的无限极循环思路代码详解

实现思路主要组件嵌套（组件自己调用自己）下面是组件所需要的数据{"code":1,"data":{"menuVoList":[{"childList":[{"childList":[],"menu":{"createBy":"0-1","createTime":1587610158,"id":"2f006aed6a114579bd8b9809724428f7","name":"系统用户权限管理","parentId":"6d68079a16b94292990f612237bd048e","path":"/userallotrole",... 继续阅读 >