elementUI
@曾经@
这个作者很懒,什么都没留下…
展开
-
vue+element table 多级复杂合并单元格
多场景下多模型(层级还有多层可自行添加判断即可)多对多dataList: [{ first: '1', second: '1', model: '蛋黄酱', all: '123213' }, { first: '1', second: '1', model: '蛋黄酱2', all: '123213' }, { first: '2',原创 2021-08-23 16:27:37 · 1024 阅读 · 0 评论 -
ehcarts vue 水球图、边框四个角样式 页面布局
echarts+element+vue 水球图和一些css小样式(四个边框角)1、引入echartsnpm install echarts -snpm install echarts-liquidfill -s2、main.jsimport echarts from "echarts";Vue.prototype.$echarts = echarts;import 'echarts-liquidfill'3、页面调用// 基于准备好的dom,初始化echarts实例原创 2020-09-04 16:12:55 · 2635 阅读 · 0 评论 -
手动调用element DateTimePicker 日期时间选择器关闭事件
手动调用element DateTimePicker 日期时间选择器关闭事件有时候手动调用控件的关闭隐藏控件事件官网api中没有此事件,查看源码发现有一个handleClose事件,亲测可用,在日期选择控件上设置ref,直接调用handleClose()可达到关闭日期控件的作用...原创 2020-08-04 12:19:43 · 4735 阅读 · 2 评论 -
vue+element 兼容主流浏览器导出csv
vue+element 兼容主流浏览器导出csvnpm install file-saver npm install --save json2csvimport FileSaver from 'file-saver';exportPathMethod(data) { this.exportCSV(this.export_pagination === '1'? this.tableList:this.tableDataList)},exportCSV(data, filename=原创 2020-07-30 15:17:41 · 328 阅读 · 0 评论 -
项目当中遇到的浏览器兼容问题
项目当中遇到的浏览器兼容问题1、例用弹性盒子布局,给六个块的宽度都是flex:1;,google、火狐等浏览器均正常,ie和edge这类浏览器是将父宽度均分,所以子元素超出就会折行,只需要将子元素设置强制不让折行后即可,white-space:nowrap;改后的效果如下2、利用多层穿透样式>>> /deep/时 edge、ie、火狐等穿透不了,google正常,可以将第二层的穿透样式改变修改的位置,例如放在第一层3、width:min-content;(外层宽度由内部元素宽原创 2020-07-29 15:10:16 · 523 阅读 · 0 评论 -
element dialog动画
自定义element dialog动画.el-dialog__wrapper { transition-duration: 0.6s;}.dialog-fade-enter-active{ animation: none !important;}.dialog-fade-leave-active { transition-duration: 0.4s !important; animation: none !important; } .dialog-fade-enter-activ原创 2020-07-07 09:53:45 · 1111 阅读 · 0 评论 -
二次开发element el-tooltip+span 超出文本部分显示省略号鼠标悬浮显示全部内容
二次开发element组件 el-tooltip+span 超出文本部分显示省略号鼠标悬浮显示全部内容EllipsisTooltip.vue(我是放置在了src/components)<template> <!-- :disabled="disabledTip" --> <el-tooltip ref="tlp" :content="text" effect="dark" :disabled="!tooltipFlag" :原创 2020-07-01 10:19:37 · 6874 阅读 · 1 评论 -
最大余额算法计算echars饼图legend图例中显示占比数
在echars饼图legend图例中显示占比数查资料发现echarts通过最大余额算法计算占比,记录下方便使用getPercentValue()getPercentValue(valueList, idx, precision){// 传入参数(数组数据,数组下标,精度),底下有例子调用 // 判断是否为空 if (!valueList[idx]) { return 0; } // 求和 var sum = valueList.reduce(function原创 2020-06-13 19:33:36 · 1257 阅读 · 1 评论 -
echarts 饼图取消legend图例的点击事件,保留鼠标悬浮legend上显示tooltie提示信息的事件
echarts 饼图因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏,进行了数据的二次处理,所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件,会关闭一个块,此时就需要重新去计算数据并重新渲染echarts,需求并没有要求做点击关闭部分块在占比图中,网上大部分资源是说设置selectedMode:false,但是这个一旦设置为false,那么点击事件和鼠标悬浮显示tooltie事件就会都取消,显然不符合,经过查官方文档发现legendselectchang原创 2020-06-13 17:30:53 · 10782 阅读 · 1 评论 -
echarts 数据量特别大且很多数值比较相近时label覆盖,legend与饼图重叠问题,鼠标在legend图例上悬浮时,tooltie提示信息显示全部信息
环境 vue+element+echarts饼图生产项目需求:1、产生的数据在饼图都有体现,tooltie显示数值,名称,占比等信息,2、lengend分页滚动显示内容,并且鼠标悬浮也显示tooltie信息3、饼图展示所有的数据占比且展示的顺序按照接口返回的数据顺序展示,但是只有数量前十的会显示label和labelLine只显示前十数据的label,需要自己计算数据其他基本在官方文档中都有记录。由于没有仔细查找文档导致想要在lengend显示tooltie提示信息,查找了很多时间,没原创 2020-06-13 15:33:42 · 4517 阅读 · 0 评论 -
element 滚动滚动条时,打开的模态框关闭,select+tree这种类似特殊的下拉,在tree上滚动不能关闭
element 滚动滚动条时,打开的模态框关闭let lock = true;let el = null;const MousedownEvent = new Event('mousedown', {bubbles:true});const MouseupEvent = new Event('mouseup', {bubbles:true});const fakeClickOutSide = () => { document.dispatchEvent(MousedownEvent原创 2020-06-04 09:22:41 · 1382 阅读 · 0 评论 -
vue+element 中的table对列自定义排序
环境:vue+element:sortable="‘custom’" + @sort-change=“changeTableSort”> 对表格列自定义排序<el-table :data="tableData" border style="width: 100%" v-loading="loading" @sort-change="changeTableSort"> <el-table-column label="编号" width="80">原创 2020-05-28 09:08:11 · 4000 阅读 · 0 评论 -
vue+element纯前端实现导出表格数据为csv Vue + js-xlsx实现文件导入导出
vue+element纯前端实现导出表格数据为csv<template> <el-button type="primary" size="mini" class="page_breadcrumb_btn" @click="getExportList">导出</el-button></template>export default { name:'userInfo', data() { tableData: [{ us原创 2020-05-22 14:57:22 · 4826 阅读 · 4 评论 -
vue elements table :span-method 自动合并行列
mergeLineMethod (){//处理合并表格数据 let mergeLine=this.tableData mergeLine.forEach((res,i) => { if (i === 0) { this.spanArr.push(1); this.pos = 0 } else { ...原创 2019-11-20 16:58:30 · 3823 阅读 · 0 评论 -
vue+element UI 当前节点的向上所有父节点全部勾选,向下的所有子节点不进行勾选,并在文本框进行展示勾选内容,勾选时并隐藏下拉框
项目当中的需求实现自定义勾选树,当选择子节点的时候,当前节点的向上所有父节点全部勾选,向下的所有子节点不进行勾选,并在文本框进行展示勾选内容,勾选时并隐藏下拉框,鼠标放置文本框,出现清除按钮,点击清楚文本并重置树,并且需要记录当前勾选的标识,名称等节点信息。后端返回的树节点信息,到底有几层未知,数据量到底有多大未知。项目环境:vue+element UI 树(el-tree)<el-form class="sarch_container mt30" label-widt原创 2020-05-28 09:57:57 · 1126 阅读 · 0 评论