如何封装Vue Element的table表格组件实现复杂功能？

本文共计2236个文字，预计阅读时间需要9分钟。

在封装Vue组件时，我通常会用函数式组件的方式来实现。函数式组件就像组件中的函数，接受渲染上下文（render context）作为参数，返回渲染好的HTML（VNode）。

在封装Vue组件时，我依旧会交叉使用函数式组件的方式来实现。关于函数式组件，我们可以把它想像成组件里的一个函数，入参是渲染上下文(render context)，返回值是渲染好的HTML(VNode)。它比较适用于外层组件仅仅是对内层组件的一次逻辑封装，而渲染的模板结构变化扩展不多的情况，且它一定是无状态、无实例的，无状态就意味着它没有created、mounted、updated等Vue的生命周期函数，无实例就意味着它没有响应式数据data和this上下文。

我们先来一个简单的Vue函数式组件的例子吧，然后照着这个例子来详细介绍一下。

export default { functional: true, props: {}, render(createElement, context) { return createElement('span', 'hello world') } }

Vue提供了一个functional开关，设置为true后，就可以让组件变为无状态、无实例的函数式组件。因为只是函数，所以渲染的开销相对来说较小。

函数式组件中的Render函数，提供了两个参数createElement和context，我们先来了解下第一个参数createElement。