巧妙封装 Vue 多行间隔表头组件，告别繁琐配置

2023-09-25 08:04:45

Vue 是一个强大的前端框架，因其灵活性和丰富的生态系统而备受青睐。在构建复杂的表格组件时，多行间隔表头往往成为一个令人头疼的问题。本文将通过一个实际案例，详细介绍如何巧妙封装一个功能强大的 Vue 多行间隔表头组件，帮你告别繁琐配置，轻松打造美观实用的表格。

问题背景

在实际项目中，我们经常需要在表格中展示复杂的多行间隔表头。传统的做法是使用嵌套的 <tr> 和 <th> 标签，但这种方式不仅代码繁琐，而且可维护性差。因此，封装一个可复用的 Vue 组件是解决此问题的理想方案。

分解逻辑

要封装一个功能完善的多行间隔表头组件，需要分解以下关键逻辑：

表头结构解析： 将复杂的多行间隔表头结构解析为一个可操作的数据结构。
表头渲染： 根据解析后的数据结构动态渲染表头，实现多行间隔布局。
表头交互： 支持表头排序、筛选等交互功能。

封装组件

<template>
  <table>
    <thead>
      <slot></slot>
    </thead>
    <tbody>
      <slot name="body"></slot>
    </tbody>
  </table>
</template>

<script>
import { ref, h } from 'vue'

export default {
  setup() {
    const headers = ref([])

    const renderHeader = () => {
      // 解析表头结构
      const rows = []
      let currentRow = []
      for (const header of headers.value) {
        if (header.rowspan) {
          currentRow.push(header)
          if (currentRow.length >= header.colspan) {
            rows.push(currentRow)
            currentRow = []
          }
        } else {
          rows[rows.length - 1].push(header)
        }
      }

      // 渲染表头
      return rows.map((row) => h('tr', row.map((header) => h('th', { colspan: header.colspan, rowspan: header.rowspan }, header.label))))
    }

    return {
      headers,
      renderHeader,
    }
  },
}
</script>

使用示例

<template>
  <my-table>
    <thead>
      <tr>
        <th colspan="3">表头1</th>
      </tr>
      <tr>
        <th>子表头1</th>
        <th>子表头2</th>
        <th>子表头3</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格主体 -->
    </tbody>
  </my-table>
</template>

<script>
import MyTable from './MyTable.vue'

export default {
  components: { MyTable },
}
</script>