封装原生table组件，一览无余的十万级数据呈现

前端

2024-01-25 02:13:21

表格，作为Web开发中最常用的组件之一，它可以将数据组织成结构化且易于阅读的形式。随着数据量越来越大，对表格组件的要求也越来越高。如何在保证性能的前提下，高效地呈现十万级甚至百万级的数据，成为前端开发中的一个挑战。

本文将通过剖析原生<table>元素，并结合实际案例，一步步封装一个原生table组件，使其能够高效地渲染十万级数据，为大型数据表格的呈现提供一个解决方案。

从0到1封装原生table组件

1. 剖析原生table元素

原生<table>元素由<tablehead>、<table>、<tbody>三个部分组成，分别表示表格头部、表格标题和表格体。其中，<table>用于定义表格的结构，<tbody>用于填充表格数据。

2. 创建table组件

基于对原生<table>元素的剖析，我们可以创建一个table组件，该组件的结构如下：

import { h } from 'vue'

export default {
  name: 'Table',
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  },
  render() {
    return h('table', { class: 'table' }, [
      h('thead', [
        h('tr', [
          this.columns.map(column => h('th', column.label))
        ])
      ]),
      h('tbody', [
        this.data.map(row => h('tr', [
          row.map(cell => h('td', cell))
        ]))
      ])
    ])
  }
}