前端界面实现
longerJue
一只正在奔跑的程序弱鸡
展开
-
elementUI表格内容的行列合并
<template> <div class="reportF"> <p>4. 线损分析</p> <div class="reportF_f_link">园区本月用电量1245.01kWh。本年度累计用电量879856kWh。</div> <div class="reportF_f">2.1 日用电量分析</div> <div class="reportF_f_link"&原创 2021-09-02 19:32:58 · 267 阅读 · 1 评论 -
vue+elementui 树形控件实现同级拖拽功能
有时候我们需要对elementui 树形控件实现动态排序,所以需要进行拖拽操作,那么为了不影响节点数的层级关系,就需要仅仅只能在同级之间来拖拽。代码如下:<el-tree class="leftTree" :draggable="true" :allow-drop="allowDrop" @node-drop="sort"</el-tree>allowDrop(draggingNode, dropNode, type) { consol原创 2021-07-07 14:20:42 · 2169 阅读 · 0 评论 -
数据可视化中CSS实现四个边角特效实现
在数据可视化大屏中,我们看到人家的到做的很炫酷,如下图,中div四个边角的特殊颜色边角是怎么实现的呢,下面本人通过两种方式进行实现。方式一<body> <h1 class="title">css实现矩形边角加粗</h1> <div class="main"> <span></span> <span></span> <span></span> <s转载 2021-06-24 12:49:57 · 1009 阅读 · 1 评论 -
利用eChart实现区间坐标展示配置
需要实现效果如下图:双X轴思路,配置代码:options: { title: { show: true, text: "负载率区间统计", textStyle: { fontSize: "18", // color: "#2d63e6", fontWeight: "100" } },原创 2021-06-17 10:57:47 · 599 阅读 · 0 评论 -
ElementUI表格行编辑单元格编辑支持(输入框,选择框)
1、普通版的table可编辑内嵌select选择框,输出框,编辑删除添加等<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!原创 2021-05-20 19:56:46 · 1602 阅读 · 0 评论 -
jsPDF实现浏览器界面导出为PDF文件
1、安装依赖环境npm install --save html2canvas //将页面html转换成图片npm install jspdf --save //将图片生成pdf2、定义全局转换函数创建一个pdf.js文件在指定位置,主要作用是进行html——>图片——>pdf的转换,可以直接引用,也可挂载在Vue实例,所有有两种写法。实现逻辑思路:a、获取DOM元素;b、将DO转换成Canvas;c、获取转换后的canvas的高度和宽度;d、将PDF的宽和高设置原创 2021-02-23 20:23:04 · 3730 阅读 · 0 评论 -
水平垂直居中的实现方式
页面样式<div class="parent"> <div class="child"></div></div>场景一:有固定宽高宽度:50px; 高度50px.parent { position: relative; background: black; width: 100px; height: 100px;}.child { position: absolute; width: 50px; height:原创 2021-02-07 11:02:00 · 68 阅读 · 0 评论