- 博客(27)
- 收藏
- 关注
RSS订阅原创 element中el-table大数据量渲染卡顿问题
主体内容显示部分：页面默认进入显示的是第一个十条，也就是索引的[0,9]。当盒子滚动的时候滚动了一行默认显[1,10]，两行[2,11]…滚动盒子：计算出来当前所有数据的高度（为了方便计算行高默认相同，案例中行高45px），以便于撑起来盒子高度，显示滚动条。在开发过程中，一个表格需要无分页展示出几万条的数据。一次性渲染了几万条，几十列，造成大量DOM一次性渲染，直接造成至使页面卡死。：目前存在一个问题，鼠标必须在滚动条的盒子上移动才会有效果。我所写的案例是默认展示十条，接下来按十条描述。
2023-11-09 18:04:29
5250
11
原创 vue+echarts绘制3D地图
效果图：1、安装依赖npm install echarts@^4.9.0npm install echarts-gl@1.1.0 --save2、引入echarts,echarts-gl，添加全局变量import echarts from 'echarts'import echartsGL from 'echarts-gl'const app = createApp(App)app.config.globalProperties.$echarts = echartsapp.config.
2022-01-05 16:15:45
2097
原创 vue项目中写echarts水球图-liquidFill
效果图：1、安装依赖npm install echarts@^4.9.0npm install echarts-liquidfill@^2.0.22、引入echartsimport echarts from 'echarts' // echarts5之前import * as echarts from 'echarts' // echarts5import "echarts-liquidfill/src/liquidFill.js"; //水球图3、添加到全局变量Vue.proto
2022-01-04 16:02:13
2608
原创 数组的增删改查
增：push() ：添加到数组末尾，返回数组的最新长度。unshift() ：添加到数组开头。concat()：首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组。删：pop()：删除数组的最后一项，返回被删除的项，影响原数组；shift()：删除数组的第一项，返回被删除的项 ，影响原数组。splice()：传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组 ，影响原数组。slice()：创建一个包含原有数组中一个
2021-10-18 17:09:32
101
原创 百度地图拖动后获取中心点
map.addEventListener("dragend", function () { var center = map.getCenter(); alert("地图中心点变更为：" + center.lng + ", " + center.lat);});
2021-08-11 16:58:56
682
原创 highcharts 图表高度自适应
更改默认样式，如果直接更改图表属性chart下的height，只能写固定像素，所以更改固定样式 能达到图表自适应父容器高度/*pieProduce图表父容器*/#pieProduce>div{ height: 100%;}.highcharts-container{ height: 100%;}...
2021-07-12 16:09:19
1280
转载 echarts图表根据窗口缩小自适应
在vue项目中用到了echarts组件，需要根据窗口大小重新渲染。刚开始使用了onresize的方式监听浏览器大小的变化，然后通过 myChart.resize() 方法重新渲染，发现只有最后一个图表执行了resize // 绘制图表 myChart.setOption(option); //这里添加以下代码 window.onresize = function(){ myChart.resize(); }最后用 addEventListener 方式绑定的
2021-07-12 16:05:27
739
原创 vue使用百度地图报错BMap is not defined-解决办法
1、在index.html添加密钥申请：http://lbsyun.baidu.com/apiconsole/key<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script2、webpack.base.conf.jsexternals: { "BMap": "BMap" },
2021-07-09 10:42:14
1537
5
原创 css实现盒子四个拐角样式
.map_company{ width: 100%; height: calc(100% - 120px); border: 0px solid rgb(60,255,253); box-shadow: 0px 0px 15px 5px rgb(60,255,253, 0.4) inset; background: linear-gradient(to left, rgb(60,255,253), rgb(60,255,253)) left top no-repea.
2021-07-08 14:11:16
985
原创 函数的调用方式
1、普通函数function fn() { console.log('11');}fn(); //fn.call();2、对象的方法var o ={ sayHi:function() { console.log(); }}o.sayHi();3、构造函数function Star() {}new Star();4、绑定事件函数btn.onclick = function() {} //点击按钮调用5、定时器函数setInter
2021-06-02 15:44:11
89
原创 forEach()、filter()、some()实现查询商品小案例
<div class="search"> 按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pr.
2021-06-02 14:51:14
105
原创 js面向对象实现Tab切换以及Tab修改
效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>面向对象
2021-05-31 18:27:18
176
原创 js实现轮播图
<div class="swiper"> <ul class="swiper-ul"> <li> <img src="../../images/swiper_1.png"> </li> <li> <img src="../../images/swiper_2.jpg"> </li>
2021-05-27 18:18:36
67
原创 Echarts横坐标两个字换行
xAxis: [ { type: "category", boundaryGap: true, data: xData, axisLine: { show: false, }, axisLabel: { interval: 0, .
2021-03-29 09:46:42
772
原创 js实现表格自动滚动
js实现表自动滚动有需要参考的，css部分就自己写吧，主要是一定要将行，也就是我写的类xn-table-content（我只写了两个行，需要测试多写几行），设置成固定高度，切记切记切记（被坑过）！还有out不需要设置高度。<div class="xn-table-body" id="scroll-box"> <div class="out"> <div class="xn-table-content" value="2"> <div style="
2021-03-26 10:31:15
583
原创 js数组从大到小排序
js数组从大到小排序let temp = []; for (var i = 0, len = this.barData.length; i < len; i++) { for (var j = 0; j <= i; j++) { if (this.barData[i].tax > this.barData[j].tax) { temp = this.barData[i]; this.barData[i] = th
2021-03-23 16:43:27
1343
原创 vue全局组件和局部组件--学习笔记
创建组件三步：1、创建组件构造器对象const cpn = Vue.extend({ template:` <div> <h2>这是一个全局组件</h2> </div> `})2、注册组件Vue.component("my-cpn",cpn);3、使用组件，必须在vue实例中使用组件<div id="app"> <my-cpn></my-cpn> <!--这是一个全局组件--&
2020-11-14 15:21:02
229
1
原创 使用css动画给leaflet中的marker添加闪烁点
使用css动画给leaflet中的marker添加闪烁点添加一个闪烁动画 @keyframes wxBlinking { from { width: 40px; height: 40px; opacity: 0.7; } to{ width: 43px; hei
2020-10-21 15:53:00
2791
2
原创 leaflet跨地图打点--学习记录
leaflet跨地图打点–学习记录做项目遇到问题，需要多个地图打点。如果这样添加一个点会默认添加到中间地图。<script> /** * 智图地图内容 */ var normalmRight2 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', { maxZoom: 18, minZoom: 1 }); var map = L.map("map",
2020-08-05 10:17:25
1116
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人