时间选择器组件之关于table走过的弯路

为了提升开发者的研发效率，提高产品品质，咱们提供一套基于饿了么UI实现的 UI组件库，TMAP-UI---旨在解决的组件地图场景下应用的问题。

最近在新增TMAP-UI组件库的开发过程当中，时间选择器是开发者反馈需求较多的一个组件，今天把在开发过程当中遇到的一些问题分析给你们。element-ui有原生的时间选择器，可是，在咱们的交互设计师是根据地图实际应用场景中的特性抽象组件，element-ui的样式以及交互操做都没法知足设计需求，须要基于源码进行二次开发，最小成本实现这个通用组件。今天主要聊下开发中遇到的一些关于table的实现问题，对table一探究竟…

关于table特色

首先，咱们先来基本了解一下table。

<table>
    <caption>A summary of the UK's most famous punk bands</caption>
    <thead>
        <tr>
            <th scope="col" class="fixed-width-test2">Band</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Buzzcocks</th>
            <td>1976</td>
            <td>9</td>
            <td>Ever fallen in love (with someone you shouldn't've)</td>
        </tr>
    </tbody>
</table>

一个基本的table布局主要由table、tbody、th、td等标签组成。W3C标准中，table的每一个标签都自带了display样式。例如td标签默认就会有display:table-cell的样式，在这个默认样式下，新增margin的设置是不会生效的。更详细标签对应样式能够查看W3C标准。

关于时间选择器

时间选择器设计图

根据上图为设计师给出的时间选择器的设计图，选择时间范围是一个重要的新增功能。

实现它的步骤拆分红如下几步：

• 1.实现基本表格布局
• 2.添加日期范围选择的样式

实现基本表格布局

首先咱们须要按照设计图调整日期间的间距和每一个日期的单元格大小。因此，须要对于每一个子格设置宽、高和margin进行布局。

从上图左侧能够看出，样式在style成功设置的状况下，右侧盒模型的宽和margin都没有生效。

我首先猜想是否是哪里的样式压盖了，又或者是样式自己由于某些缘由致使没有生效。

因而使用经常使用的样式压盖方法，在没生效的样式后添加!important来提升设置样式的优先级，但仍是没有生效。

后来查了W3C的关于table的设置说明，发现了上文提到的td自带的display:table-cell样式。因而尝试在样式中新增display:block替代原有table自带样式。果真当我设置以后，子td的宽高和margin都生效了。

查阅资料以后发现，一方面td标签不容许设置margin，另外一方面，在table总体的宽度设定后，样式不会按照td标签中设置的宽度执行，会按照总体的table宽度均分给每个子td。若是但愿一些特殊的效果，对宽度设置百分比是能够生效的。这其实可以理解，若是在table-cell的模式下容许某个子模块设置宽度和margin，会致使子模块的宽度和高度不可预期，对同一行的其余子块的宽高形成影响。总结下，为了保证table的样式总体联动性，table宽高和子td的宽高设置不能同时使用绝对数值来设置，只能设置其中一个绝对值，另一个用相对值来计算划分。

若是咱们经过display:block完成格式，总体的表格结构就会被打破，产生更多不符合表格逻辑预期的样式问题。因而咱们经过每一个子单元格均分的特性，设置总的行宽和行高来控制单元格自身的大小和之间的距离，从而达到实现总体表格布局的效果。

添加日期范围和选择样式

• 盒子宽度问题

那当咱们hover态的盒子和背景颜色的盒子大小不同的时候，咱们就须要在td的内部内置一个盒子。这样经过设置颜色咱们就能够实现背景。按照上述，只要咱们设置好总体的table宽度和背景颜色，就能够获得日期选中范围的设计背景效果，对应的背景颜色获得以下结果。

设定总体宽度以后，咱们发现部分子td之间存在一条深色的边界线。这是因为他们之间出现了互相压盖，总体的七个td的总宽度设计稿给出是242px，按照预期是应该七个子模块均分宽度。但我查看具体每一个子td的宽度发现，有的子td宽度是3四、有的是35。这也就是说，在宽度不可以被子模块整除均分的状况下，table自动为咱们作了取整，而且为了保持总宽度的不便，有些被向下取整，有些被向上取整。

目前想到的解决办法是，经过计算固定宽度的总宽度使得每个td可以被整除。

• 选中态背景问题

接下来，咱们须要解决在选中态下起终点日期的样式问题。按照原有的选中样式不管是否添加背景都不能知足需求。见下图，会出现10号日期右侧空白或26号日期多余背景的状况。

对于起始日期，要完成上述要求，咱们须要将起始框以及它的右侧做为块内容而且仍能保证水平居中。解决办法是，对于10号日期的选择起点，将左侧设置margin，右侧设置相应宽度的padding。

作到这里基本能够认为完成了一个日期范围选择功能。

但实战发现，还没完......

当用户只选择了起点咱们会发现选中态致使右侧的边界还会有蓝色背景色。因而，咱们还要利用scss的语法特性为样式设置生效条件来区分两种不一样的显示策略。

• border-radius问题

设计稿要求，每一行的选择框的起始和末尾须要有圆角。这样一个常见的需求，table果真没让我失望，对tr标签设置无效。缘由是由于在border-collapse设置为separate下，对于全部table标签设置圆角都没法生效。

查阅资料，找到了两种思路的解决方法。

第一种就是对tr的子td， first-child/last-child设置圆角。讲到这里就不得不提table的一个属性:border-collapse。这个属性用来决定表格的边框是分开的仍是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。这里有三个经常使用值：inherit, separate,collapse。separate表示每一个单元格拥有独立的边框，inherit表示相邻的单元格共用同一条边框。

当在separate模式下，咱们还能够经过设置border-spacing设置边框的宽度。

w3c border-spacing配图

第二种当设置border-collapse:inherit，即可以设置td和tr的圆角了。

总结

在table布局下，有许多本身样式布局，在咱们熟练掌握了以后会发现有不少方便的特性。我也把此次遇到的问题沉淀成了表格，但愿能对你们之后的开发有点帮助，少走弯路。

产品推广

地图组件是专为移动端定制的轻应用产品，支持各手机端主流浏览器，能够实现位置展现、路线规划、地图选点、前端定位等多种场景的下的调用。相比于JS API, 能够经过高度参数化的URL直接调用，极大简化开发的复杂度，下降维护成本。欢迎你们体验！