# 25｜表格：如何设计一个表格组件？

    你好，我是大圣。

上一讲我们实现了树形组件，树形组件的主要难点就是对无限嵌套数据的处理。今天我们来介绍组件库中最复杂的表格组件，表格组件在项目中负责列表数据的展示，尤其是在管理系统中，比如用户信息、课程订单信息的展示，都需要使用表格组件进行渲染。

关于表单的具体交互形式和复杂程度，你可以访问[ElementPlus](https://element-plus.gitee.io/zh-CN/component/table.html)、[NaiveUi](https://www.naiveui.com/zh-CN/os-theme/components/data-table)、 [AntDesignVue](https://www.antdv.com/components/table-cn)这三个主流组件库中的表格组件去体验，并且社区还提供了单独的[复杂表格组件](https://surely.cool)，这一讲我就给你详细说说一个复杂表格组件如何去实现。

## 表格组件

大部分组件库都会内置表格组件，这是总后台最常用的组件之一，用于展示大量的结构化的数据。html也提供了内置的表格标签，由 <table> 、<thead> 、<tbody> 、<tr> 、<th> 、<td> 这些标签来组成一个最简单的表格标签。

我们先研究一下html的table标签。下面的代码中，table 标签负责表格的容器，thead负责表头信息的容器，tbody负责表格的主体，tr标签负责表格的每一行，th和td分别负责表头和主体的单元格。

其实标准的表格系列标签，跟 div+css 实现是有很大区别的。比如表格在做单元格合并时，要提供原生属性，这时候用 div 就很麻烦了。另外，它们的渲染原理上也有一定的区别，每一列的宽度会保持一致。

```xml
<table>
  <thead>
    <tr>
      <th>课程</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>重学前端</td>
      <td>129</td>
    </tr>
    <tr>
      <td>玩转Vue3全家桶</td>
      <td>129</td>
    </tr>
  </tbody>
</table>

```

简单的表格数据渲染并不需要组件，我们直接使用标准的 table 系列标签就可以。但有的时候，除了呈现数据，也会带有一些额外的功能要求，比如嵌套列、性能优化等。这时候组件的好处就很明显了，它能帮我们省去这些基础的工作。

表格组件的使用风格，从设计上说也分为了两个方向。一个方向是完全由数据驱动，这里我们可以参考Naive Ui的使用方式，n-data-table标签负责容器，直接通过data属性传递数据，通过columns传递表格的表头配置。

下面的代码中，我们在colums中去配置每行需要显示的属性，通过render函数可以返回定制化的结果，再使用h函数返回Button，渲染出对应的按钮。

```xml
<template>
  <n-data-table :columns="columns" :data="data" :pagination="pagination" />
</template>
<script>
import { h, defineComponent } from 'vue'
import { NTag, NButton, useMessage } from 'naive-ui'
const createColumns = ({ sendMail }) => {
  return [
    {
      title: 'Name',
      key: 'name',
      align: 'center'
    },
    {
      title: 'Age',
      key: 'age'
    },
    {
      title: 'Action',
      key: 'actions',
      render (row) {
        return h(
          NButton,
          {
            size: 'small',
            onClick: () => sendMail(row)
          },
          { default: () => 'Send Email' }
        )
      }
    }
  ]
}
const createData = () => [
  {
    key: 0,
    name: 'John Brown',
    age: 32,
    tags: ['nice', 'developer']
  },
  {
    key: 1,
    name: 'Jim Green',
    age: 42,
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32
  }
]
export default defineComponent({
  setup () {
    const message = useMessage()
    return {
      data: createData(),
      columns: createColumns({
        sendMail (rowData) {
          message.info('send mail to ' + rowData.name)
        }
      }),
      pagination: {
        pageSize: 10
      }
    }
  }
})
</script>


```

还有一种是Element3现在使用的风格，配置数据之后，具体数据的展现形式交给子元素来决定，把columns当成组件去使用，我们仍然通过例子来加深理解。

下面的代码中，我们配置完data后，使用el-table-colum组件去渲染组件的每一列，通过slot的方式去实现定制化的渲染。这两种风格各有优缺点，我们后面还会结合Elemnt3的源码进行讲解.

```xml
<el-table :data="tableData" border style="width: 100%">
  <el-table-column fixed prop="date" label="日期" width="150">
  </el-table-column>
  <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
  <el-table-column prop="province" label="省份" width="120"> </el-table-column>
  <el-table-column prop="city" label="市区" width="120"> </el-table-column>
  <el-table-column prop="address" label="地址" width="300"> </el-table-column>
  <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
  <el-table-column fixed="right" label="操作" width="100">
    <template v-slot="scope">
      <el-button @click="handleClick(scope.row)" type="text" size="small"
        >查看</el-button
      >
      <el-button type="text" size="small">编辑</el-button>
    </template>
  </el-table-column>
</el-table>
<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row)
      }
    },
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          }
        ]
      }
    }
  }
</script>

```

## 表格组件的扩展

复杂的表格组件需要对表格的显示和操作进行扩展。

首先是从表格的显示上扩展，我们可以支持表头或者某一列的锁定，在滚动的时候锁定列不受影响。一个table标签很难实现这个效果，这时候我们就需要分为table-head和table-body两个组件进行维护，通过colgroup组件限制每一列的宽度实现表格的效果，而且表头还需要支持表头嵌套。

下面的示意图中，表头就是被分组显示的。

![图片](https://static001.geekbang.org/resource/image/f6/4a/f60dac2bf267c10d5f230e8cb03b744a.png?wh=1764x1282)

我们还是先分析一下需求。对于表格的操作来说，首先要和树组件一样，每一样支持复选框进行选中，方便进行批量的操作。另外，表头还需要支持点击事件，点击后对当前这一列实现排序的效果，同时每一列还可能会有详情数据的展开，甚至表格内部还会有树形组件的嵌套、底部的数据显示等等。

把这些需求组合在一起，表格就成了组件库中最复杂的组件。我们需要先分解需求，把组件内部拆分成table、table-column、table-body、table-header组件，我们挨个来看一下。

首先，在table组件的内部，我们使用table-body和table-header构成组件。table提供了整个表格的标签容器；hidden-columns负责隐藏列的显示，并且通过table-store进行表格内部的状态管理。每当table中的table-store被修改后，table-header、table-body都需要重新渲染。

```xml
<template>
  <div class="el-table">
    <div class="hidden-columns" ref="hiddenColumns">
      <slot></slot>
    </div>
    <div class="el-table__header-wrapper"
         ref="headerWrapper">
      <table-header ref="tableHeader"
                    :store="store">
      </table-header>
    </div>
    <div class="el-table__body-wrapper"
         ref="bodyWrapper">
      <table-body :context="context"
                  :store="store">                  
      </table-body>
    </div>
  </div>
</template>

```

然后在table组件的初始化过程中，我们首先使用createStore创建表格的store数据管理，并且通过TableLayout创建表格的布局，然后把store通过属性的方式传递给table-header和table-body。

```xml
let table = getCurrentInstance()
    const store = createStore(table, {
      rowKey: props.rowKey,
      defaultExpandAll: props.defaultExpandAll,
      selectOnIndeterminate: props.selectOnIndeterminate,
      // TreeTable 的相关配置
      indent: props.indent,
      lazy: props.lazy,
      lazyColumnIdentifier: props.treeProps.hasChildren || 'hasChildren',
      childrenColumnName: props.treeProps.children || 'children',
      data: props.data
    })
    table.store = store
    const layout = new TableLayout({
      store: table.store,
      table,
      fit: props.fit,
      showHeader: props.showHeader
    })
    table.layout = layout


```

再接着，table-header组件内部会接收传递的store，并且提供监听的事件，包括click，mousedown等鼠标操作后，计算出当前表头的宽高等数据进行显示。

```xml
const instance = getCurrentInstance()
    const parent = instance.parent
    const storeData = parent.store.states
    const filterPanels = ref({})
    const {
      tableLayout,
      onColumnsChange,
      onScrollableChange
    } = useLayoutObserver(parent)
    const hasGutter = computed(() => {
      return !props.fixed && tableLayout.gutterWidth
    })
    onMounted(() => {
      nextTick(() => {
        const { prop, order } = props.defaultSort
        const init = true
        parent.store.commit('sort', { prop, order, init })
      })
    })
    const {
      handleHeaderClick,
      handleHeaderContextMenu,
      handleMouseDown,
      handleMouseMove,
      handleMouseOut,
      handleSortClick,
      handleFilterClick
    } = useEvent(props, emit)
    const {
      getHeaderRowStyle,
      getHeaderRowClass,
      getHeaderCellStyle,
      getHeaderCellClass
    } = useStyle(props)
    const { isGroup, toggleAllSelection, columnRows } = useUtils(props)

    instance.state = {
      onColumnsChange,
      onScrollableChange
    }
    // eslint-disable-next-line
    instance.filterPanels = filterPanels


```

在table-body中，也是类似的实现方式和效果。不过table-body和table-header中的定制需求较多，我们需要用render函数来实现定制化的需求。

下面的代码中，我们利用h函数返回el-table\_\_body的渲染，通过state中读取的columns数据依次进行数据的显示。

```xml
render() {

    return h(
      'table',
      {
        class: 'el-table__body',
        cellspacing: '0',
        cellpadding: '0',
        border: '0'
      },
      [
        hColgroup(this.store.states.columns.value),
        h('tbody', {}, [
          data.reduce((acc, row) => {
            return acc.concat(this.wrappedRowRender(row, acc.length))
          }, []),
          h(
            ElTooltip,
            {
              modelValue: this.tooltipVisible,
              content: this.tooltipContent,
              manual: true,
              effect: this.$parent.tooltipEffect,
              placement: 'top'
            },
            {
              default: () => this.tooltipTrigger
            }
          )
        ])
      ]
    )
  }
  

```

整体表格组件的渲染逻辑和过程比较复杂。为了帮你抽丝剥茧，这节课我重点给你说说Element3中table标签的渲染过程，至于具体的表格实现代码，你可以课后参考Element3的源码。

表格组件除了显示的效果非常复杂、交互非常复杂之外，还有一个非常棘手的性能问题。由于表格是二维渲染，而且表格组件如果想支持表头或者某一列锁定的定制效果，内部需要渲染不止一个table标签。一旦数据量庞大之后，表格就成了最容易导致性能瓶颈的组件，那这种场景如何去做优化呢？

这里我们要快速回顾一下性能优化那一讲的思路：性能优化主要的思路就是如何能够减少计算量。比如我们的表格如果有1000行要显示，但是我们浏览器最多只能显示100条，其他的需要通过滚动条的方式进行滚动显示，屏幕之外，成千上万个dom元素就成了性能消耗的主要原因。

针对这种情况，我们可以考虑类似图片懒加载的方案，对屏幕之外的dom元素做懒渲染，也就是非常常见的**虚拟列表解决方案**。

在虚拟列表解决方案中，我们首先要获取窗口的高度、元素的高度以及当前滚动的距离，通过这些数据计算出当前屏幕显示出来的数据。然后创建这些元素标签，设置元素的transform属性模拟滚动效果。这样表面看是1000条数据在表格里显示，实际只渲染了屏幕中间的这100行数据，当我们滚动鼠标的同时，去维护这100个数据列表，这样就完成了标签过多的性能问题。

如果表格内部每一行的高度不同的话，我们就需要对每一个元素的高度进行估计。具体操作时，先进行渲染，然后等待渲染完毕之后获取高度并且缓存下来，即可实现虚拟列表元素高度的自适应。

## 总结

今天要我们学习了表格组件如何实现，我给你做个总结吧。

表格组件是组件库中最复杂的组件，核心的难点除了**数据的嵌套渲染**和**复杂的交互**之外，**复杂的dom节点**也是表格的特点之一。我们通过对table-header、table-body和table-footer的组件分析，掌握了表格组件设计思路的实现细节。

除此之外，表格也是最容易导致页面卡顿的组件，所以我们除了数据驱动渲染之外，还需要考虑通过虚拟滚动的方式进行渲染的优化，这也是列表数据常见的优化策略，属于懒渲染的解决方案。

无论数据有多少行，我们只渲染用户可视窗口之内的，控制top的属性来模拟滚动效果，通过computed计算出需要渲染的数据。最后，我还想提醒你注意，虚拟滚动也是面试的热门解决方案，你一定要手敲一遍才能加深理解。

## 思考题

最后留个思考题吧，你现在基础的复杂项目或者组件库中，有哪些组件适合用虚拟滚动做性能优化呢？欢迎你在评论区分享你的答案，也欢迎你把这一讲分享给你的同事和朋友们，我们下一讲再见