html表格自动合并

这篇文章是介绍如何在实现表格的自动合并 
1
2
3
4
万恶的产品设计一个动态表格合并的功能，曾经实现了一版运用js进行dom元素的拼接，发现代码量好大，
后来产品再次设计了类似表格，复用之前代码感觉心好累，所以我就花十分钟仔细想了下，得出下面的解决方案。
最终效果为 https://goddywu.github.io/html/demo/table_combine.html
源码地址 https://github.com/Goddywu/html/blob/master/demo/table_combine.html

场景

想象一个情景，我们需要记录用户的操作，并展示出来，用户在相邻时间点做的同样操作，我们希望它们占据同一个格子。

思路

  • 如果我们希望做一个3X2的表格，第二列合并前两格，那么我们的HTML代码将是

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <table>
      <tr>
        <td>1行1列</td>
        <td rowspan="2">第2列前两格</td>
      </tr>
      <tr>
        <td>2行1列</td>
      </tr>
      <tr>
        <td>3行1列</td>
        <td>3行2列</td>
      </tr>
    <table>

  • 观察需要合并的第二列，合并前我们每个行元素tr内需要有第二列的td元素，假设1代表存在，那么第二列的td存在情况为 [1, 1, 1]

  • 观察合并后的第二列的td元素存在情况，为 [1, 0, 1]
  • 如果将rowspan的值代替掉第一个td元素，那么我们得到的数组为 [2, 0, 1]，数组名称设置为temp
  • 有了这个数组就好办了，我们可以用vue的v-on绑定rowspan，用v-if来去掉例如第二行不需要的第二个td元素。

  • 数据为

    1
    2
    3
    4
    5
    6
    7
    8
    #已知数据
    data = [
      ['2018-01-01', '买包子'],
      ['2018-01-02', '吃包子'],
      ['2018-01-03', '吃包子']
    ]
    #我们需要计算出的数组
    array = [2, 0, 1]

  • 我们的代码将是

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <table>
      <tr v-for='(i, index) in data'>
        <td>
          {{i[0]}}
        </td>
        <td v-if='temp[index] != 0'>
          {{i[1]}}
        </td>
      </tr>
    </table>

接下来，就是核心：如何得出数组array

思路：
建立一个temp作缓存变量，count作为计数器，遍历data数组，如果值与temp相同，则计数器加1，如果不同，则temp值赋值为当前值，并且计数器重置。

所有代码戳链接

参考资料

Comentários

⬆︎TOP