从源码看Element UI Table组件实现思路

在你实现一个组件过程当中，必定要注意一下几点

• 将代码模块化而且分离。若是你将大量的逻辑或者是代码都放在钩子函数中（好比mounted），那么写出来的组件代码将很是丑陋，这样子写出的代码也每每难以维护。

• 第二就是要注意可扩展性。由于定制一个基础组件，也许当你往后还想对它的功能进行扩展的话，那么必定要注意本身代码的编写结构。
  接下来来看一下element ui是如何编写一个table组件的，在看源码以前，首先仍是要对他的table组件的大体功能有一个了解，这样咱们在看源码的时候才会知道这一段大概实现了什么功能。

点开table的src目录下，有这么几个文件

• dropdown.js

• filter-panel.vue（实现表格勾选的组件）

• table-body.js （实现表格body的组件）

• table-column.js （实现表中中每一列的组件）

• table-footer.js （定义表格尾部的组件，会有一些合计的功能）

• table-header.js（定义表格thead的文件）

• table-layout.js （定义表格布局的文件）

• table-store.js（定义事件的方法集中在这里）

• table.vue（最终将上述组件整合后的一个最终table组件）

• util.js（定义了一些工具函数）
  对于这个结构也就是像一开始提到的那样，将代码尽可能拆分，这样组织下来结构清晰。分析的时候我将举例每一种状况的表明，相似的照着实现就能够了。

首先是事件的实现

以row-click为例，咱们使用这个事件的方式是@row-click=“dosomething”,那组件内部如何触发这个事件呢，最简单的方法就是在每一次tr循环的时候都去绑定上一个@click事件就好，在这个事件里面去emit（‘row-click’）事件就好，但是这就是会有一个问题，事件一多，代码都集中在methods中，会写出很是长的代码，这个时候就须要分离，咱们新建一个store.js，用来管理各类事件。大体实现以下：

const TableStore = function (table,initialSatate) {
  this.table = table
  this.states = {}
}
TableStore.prototype.mutations = {
  handleRowClick () {
    this.table.emit('row-click')
  }
}
Table.prototype.commit = function (name,..agrs){
  mutations[name].apply(name,args)
}

咱们在表格table建立一开始，在data (){}中就会建立一个新的tableStore对象，咱们在每一行点击的时候只用this.store.commit('handleRowClick');基于这个流程，若是之后还须要继续添加事件，你就能够在mutations里面去定义。

layout.js也是同样的道理，这里我只是对表格的高度去进行了设定，对于一个vue对象来讲，不能用dom思路去实现它的高度，我是将vue对象打印出来，在一步一步寻找那个style属性

TableColumn的实现

其实对于一个表格来讲，他的表头将会很重要。在蚂蚁金服的那个antd组件库中，他们对于表头的定义是这样的，你须要传入一个columns（props），里面将你定义的每一列信息写进去，而vue在实现的过程当中，是将做为

组件children元素,在组件里再去定义每一列的属性，基于这两种实现方式的不一样，我以为很大程度上是由于vue中有一个标签（也多是别的缘由），可是又有一个问题，就是在table-header/table-body/table-column中，他们都是用的render方法去渲染组件，我在参考他们官方编写的过程当中，用到了jsx语法的模式，不是很理解为何又采用这种方式去编写组件。
最后我实现的table功能文档
以及最终的一个样例demo