【Vue】基于UI库二次组件封装

vue现在使用非常广泛，对于一些公用的功能我们通常也会封装成组件，同时还有各类的UI组件库给我们开发提供了便利。

这段时间经手了几个项目，都是后台管理系统的，大家知道后台管理系统最多的就是table以及表单，几乎90%的页面都会包含这两个，但从中发现了好几个问题：

第一，有些项目表格基本没有做封装，直接是使用的element-ui或者iview等UI库提供现成的copy过来的，然后很多页面可以看到的就是表格、表单的各种逻辑，而且每个页面基本代码都相似，不同的就是调用的接口，表单的配置。

第二，虽然有些项目对表格或者表单进行了二次封装，但是维护起来却很不方便，参数都是通过一个一个传递过来，代码量大，并且slot也不支持，大大降低了灵活性。

下面以antd-vue封装一个Table组件为例进行一个简单的封装实例。

如果能解决以上的三个问题，其实也就完成50%了，剩下的就是处理一些逻辑。

我们先来解决第一个问题。
下面是antd官方的一个实例：

现在我要改成可以如下方式使用并且效果一样，tablePanel是我需要封装的组件。

现在上方代码只传入了两个参数，官方文档是有15+个API参数可以配置的，如果我们一个个传进去，然后又通过props一个个接口这样特别繁琐，而且当UI库进行更新增加了参数时，组件又需要同步修改。

其实每个组件都有一个props对象，我们只要把子组件的props赋给当前组件的props就可以继承子组件的所有属性了。

TablePanel组件:

接下来我们处理第二个和第三个问题，想要解决这个两个问题，我们可以通过jsx来处理。
首先我们需要安装 Babel 插件

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

然后添加预设到 babel.config.js:

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}

然后修改TablePanel组件：

这样我们就能将所有的props属性传递给Table组件，并支持插槽。可以按如下方式使用，参数以及插槽使用同antd,Table组件相同。

剩下的我们可以开始封装分页请求的逻辑，完整代码如下：

父组件可以通过this.$ref['tablePanel].loadTableData({...参数})更新表单数据，一般用于查询。