在使用 flex 进行布局时涉及多个元素遍历渲染， 要使用 space-between 时会发现： 最后一行元素数不满一行个数时会平均分布开， 而不会从左到右排列， 不符合一般样式要求

可以使用下面的办法解决

场景：在使用 el-table 时会遇到表格某行数据过长的情况

• 一般的处理方式是直接使用 el-table-column 的 show-overflow-tooltip 来省略过长的内容
• 还有一种是特殊需求：需要 多行展示后 再进行省略显示。 以下是处理方式：

前一阵子在使用antVL7进行地图可视化开发时遇到一些问题，这里总结记录一下

经典热力图展示问题

首先是基本用法

1 2 3 4 5 6 7 8

const myHeatmapLayer = new HeatmapLayer() .source(data) .shape('heatmap') .size('demonum', [0, 1.0]) .style({ // 具体色带，热力图最小半径等配置，可以自行去官网查看 ...... })

上述代码 data 是一个由多个 feature 点构成的 geojson 格式数据；
其中 demonum 是上述数据中 feature 属性即 feature.properties.demonum 字段大小（必须为数字类型，可以遍历使用Number()操作）
由于有多个 feature, 所以热力图 将根据每个 feature 中的 demonum 字段大小作为热力值进行绘制

最近项目上遇到一个需求是地图上的 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 样式控制，代码如下：