最近项目上遇到一个需求是地图上的 popup 弹窗里需要做个分页表格，所以这里只能用原生 html js 来实现，又因为 popup 宽度非常有限，所以过长的 cell 需要用…隐藏，鼠标悬浮展示完整内容，纯 html + css 即可实现

1
2
3
4
5
6
7
8
9
10

<table class='moreTable'>
  <tr>
    <td class='tableCell' title='内容内容内容内容内容内容内容内容'>内容内容内容内容内容内容内容内容</td>
    <td class='tableCell' titel='内容内容内容内容内容内容内容内容内容内容内容'>内容内容内容内容内容内容内容内容内容内容内容</td>
  </tr>
  <tr>
    <td class='tableCell' title='内容内容内容内容内容内容'>内容内容内容内容内容内容</td>
    <td class='tableCell' title='内容内容内容内容内容内容内容内容'>内容内容内容内容内容内容内容内容</td>
  </tr>
</table>

众所周知 谷歌浏览器默认的滚动条很丑 -.-| ，在项目中非常影响美观，还好可以使用 css 样式控制，代码如下：

从数组中删除重复项

1

var deletedArr = [...new Set(arr)]

注意：首先需要进行geoserver环境搭建（需要在 tomcat 中 geoserver 包里的 web.xml 文件中进行跨域处理）及相关依赖引入

.shp 文件处理（解析文件并展示）

后端接收前端发送的 file 文件流，通过 GeoServer 发布，并返回一个 geojson 格式数据的 url

主要代码：

js定时器实现一个网页时钟，直接贴代码（Vue框架环境）

1
2
3
4
5
6
7
8

<template>
  <div>
    <div class="he-sjzt">
      <div class="he-xs">{{ dateTime }}</div>
      <div class="he-nyr">{{ yearTime }}</div>
    </div>
  </div>
</template>

使用场景：在当前页面使用的定时器，离开当前页面需要销毁 以避免不必要的性能浪费

首先是setInterval和clearInterval的基本用法

1
2
3
4
5
6
7

const myTimer = setInterval(function(){ // 每 1s 调用一次
  console.log('do once...')
}, 1000)

beforeDestroy(){
  clearInterval(myTimer) // 清除定时器 myTimer
}

使用 asycn / await

使用场景：当有耗时方法执行，想让另一段代码在这段耗时代码之后执行时

JSON串中key值改为指定字符串

1

objDemo[newKey] = 1

等同于👇

如果同一变量有多个条件

1
2
3

if(a == 1 || b == 2 || c == 3){
  // do something
}

👇shorter👇

Vue Element 分页组件二次封装 免除了繁琐的事件编写 使用更方便

组件（复制粘贴即可用）