Vue实战（六）通用Table组件

本文是Vue实战系列的第六篇文章，主要介绍Falcon项目中通用 Table 组件的开发和使用。Falcon项目地址：https://github.com/thierryxing/Falcon

通用 Table 组件 TableBox

随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。

对于一个中后台类的项目，一个比较常见的展示形式就是Table了，相信大家都不陌生，如下图所示：

DingTalk20171120203642.png

一个Table通常由如下几个部分构成：

标题
表头
表格内容
分页控件

除此之外，由于 Table 中的数据往往都是从后端获取的，所以这个包含 Table 的页面还需要发起一个请求，并且将最终的内容渲染在表格之内，请求的过程由于是异步的，所以需要给用户展示一个 Loading 动画；当请求数据为空时，需要显示一个占位的空元素控件。

在 Falcon 项目的实践中，我们发现，每一个页面中的 Table 除了行数，列数，及单元格的内容不同之外，其它的地方，包括样式，分页及数据处理逻辑都是一样的，每次新增一个这样的页面无非就是拷贝粘贴了，那么在这种情况下，我们抽取出了一个通用的 Table 组件，取名为：TableBox。

说到这里插一个题外话：

我们在编写前端代码的过程中有时会感到困惑，究竟什么时候应该将模块抽取出来，而不是写死在页面中呢？

关于这个问题我认为，如果一个功能只出现在了一个或两个页面中，往往是没有必要处理的，因为一两个功能的重复还不足以说明问题，也很难看出其中的共性，如果强行抽取的话，反而会增加维护的负担；如果出现的地方超过了两处，那么我们就需要考虑将这个功能进行抽取了，我也常常和 Team 的人说：“如果一个功能你拷贝粘贴了1次，没关系，不用纠结；2次的话，就得考虑其复用性和组件化了”。

当然，以上内容只适用于那些初期开发过程中无法预测未来变化的项目，如果刚开始产品设计的时候，就能够充分的预见和考虑未来的业务发展，并且给出详细的产品及UI设计方案，那么就另当别论了。

回到我们的主题，抽取这个 TableBox 其实并不是一气呵成的，而是在业务迭代中，不断地发现新的场景，新的问题，带着这些问题我们不断的优化 TableBox，最终达到一个较为完整的状态。这也符合 Vue 本身渐进式的理念。接下来我们花些时间，一起探讨一下这些场景和问题：

场景&问题1：Table 数据获取和渲染

我们发现，对于不同的页面，只要带有 Table 的，其数据都需要从远端服务器获取，一般情况下，我们会在每个业务中都去写一下这个网络获取数据的逻辑，但是，如果仔细想想，你就会发现，其实这类列表数据获取和处理的逻辑都是一样的。所以针对这个情况，我们只要和后端协商好列表相关的统一 API 数据结构，如：

{
    "status": 0, 
    "message": "", 
    "data": {
        "list": [
            ...
        ], 
        "total": 30  //总个数
    }
}

那么数据获取，渲染，Loading 动画展示隐藏，分页加载等操作都可以在 TableBox 中完成。
这个组件需要的只是向外暴露出数据请求的 API 地址及各种参数：

props: {
  // API URL
  url: {
    type: String,
    default: ''
  },
  // URL路径中的参数，如：/posts/#{id}/comments
  pathParams: {
    type: Object,
    default: () => {}
  },
// Query参数
  options: {
    type: Object,
    default: function () { return {params: {}} }
  }
}

然后写好对应的获取数据的 fetchData 方法：

fetchData (page) {
    this.showLoading()
    this.options.params.page = page >= 1 ? page : 1
    NetWorking
      .doGet(this.url, this.pathParams, this.options)
      .then(response => {
        this.items = response.data.list
        this.paginate.totalRows = response.data.total
        this.hideLoading()
      }, () => {
        this.hideLoading()
      })
}

这样对于调用者来说，只需要简单的传入相关 API 地址及参数就可以了，数据加载的事情让 TableBox 去处理就好了，非常的方便。

场景&问题2：适配不同的表格列

因为 TableBox 组件本身是和业务无关的，所以其肯定无法知道我的这个 Table 的表头是什么，有多少行，也无法知道每一行展示什么数据，这些内容全部应该由父组件告知 TableBox。

要实现以上的功能，我们可以借助于 Vue 本身提供的强大的工具 Slot，如果简单点说，大家可以把 Slot 理解为一个坑位，因为大多数情况下，组件自己无法预先知道某块区域放置什么内容，那么组件可以先将个区域放置一个 Slot，就是挖个坑，当父组件引入子组件时，会告诉子组件往这个坑位中填充什么样的内容。

回到我们的 TableBox 组件，我们首先挖两个坑（放置两个 Slot ），命名为 ths 和 item ，分别用于表头和行列表内容：

这样对于表头的数据，可以由引入 TableBox 的父组件来指定，用法如下，其中 slot='ths' 就是刚才我们在 TableBox
中放置的 Slot


    ID
    Project
    Version
...

同样，对于每一行的内容，也是由引入 TableBox 的父组件来指定，用法如下：

问题&场景3：表格数据自刷新

在开发业务的过程中，遇到一个场景：当页面数据已经全部加载完毕后，在某些场景下需要改变 Table 中某些数据的状态（删除某列或改变某一列的数据）。

DingTalk20171205113218.png

这里具体举个 Falcon 中的实际例子：
我们允许用户给每个项目分配多个环境，以区分测试，生产，开发和各种自定义的场景，在每个环境下，用户可以设置不同的 Git Branch 。用户点击 Choose Branch 按钮后，会触发一个请求到后端，变更当前环境的 Git Branch，修改成功后该列表项的按钮会显示为 Current Branch。

由于以上逻辑都是在引入了 TableBox 的父组件中完成的，其能够控制数据的刷新，由于 场景1 中我们已经把数据请求的逻辑都封装在了 TableBox 中，所以我们需要让其向外暴露出一个 Boolean 属性：reloadData，当此属性为 true 时，TableBox 会重新请求一次API，并刷新列表。

reloadData: {
    type: Boolean,
    default: false
}

同理，由于操作数据是由父组件发起的，所父组件中也需要有同样的属性，并且和 TableBox 中的 reloadData 保持数据同步，这里用到了 Vue 2.3 版本增加的一个 .sync 修饰符进行处理。

这样，当 reloadData 在数据更新完毕后还原为 false 状态时，我们可以显示的触发一个 emit 事件：

hideLoading () {
    this.showOverlay = false
    this.$emit('update:reloadData', false)
}

问题&场景4：父组件获取表格数据

由于目前所有的数据获取都是在 TableBox 内部处理的，所以父组件本身是无法直接获取到数据的。但是在某些情况下，我们又希望父组件能够获取到数据，以便能够在顶层进行更灵活的处理，这时我们就需要在 TableBox 内部将数据抛出。

抛出的方式也很简单，我们可以使用 emit 方法抛出一个事件。根据这个思路我们改造一下上文提到的 fetchData 方法：

fetchData (page) {
    this.showLoading()
    this.options.params.page = page >= 1 ? page : 1
    NetWorking
      .doGet(this.url, this.pathParams, this.options)
      .then(response => {
        this.items = response.data.list
        this.paginate.totalRows = response.data.total
        // 抛出data完整对象，以便父组件使用
        this.$emit('afterFetchData', response.data)
        this.hideLoading()
      }, () => {
        this.hideLoading()
      })
}

然后在父组件中监听这个事件，这样就能获取到完整的数据了。


...

methods: {
      afterFetchData (data) {
        this.slb = data
      },

...

总结

解决了以上4个场景的问题后，我们这个 TableBox 可以说告一段落了，后续如果有遇到新的场景，新的问题，我们只需要不断的去优化去完善这个组件即可。
到目前为止，TableBox 已经应用到了我们内部的三个后台项目约几十个页面中，可以说大大节省了我们的时间，提升了整体效率。
并且随着这样的组件越来越多，甚至我们的后端工程师经过简短的培训，也可以上手部分前端页面的开发了。
最后附上 TableBox 的地址：https://github.com/thierryxing/Falcon/blob/mock/src/components/global/TableBox.vue