Vue实战(六)通用Table组件

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

通用 Table 组件 TableBox

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

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

Vue实战(六)通用Table组件_第1张图片
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 中某些数据的状态(删除某列或改变某一列的数据)。

Vue实战(六)通用Table组件_第2张图片
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

你可能感兴趣的:(Vue实战(六)通用Table组件)