在你完成一个组件过程当中，肯定要注意一下几点

• 将代码模块化而且星散。假如你将大批的逻辑或者是代码都放在钩子函数中（比方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