時間選擇器組件之關於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直接調用，極大簡化開發的複雜度，下降維護成本。歡迎你們體驗！