摘要：接下来来看一下是如何编写一个组件的，在看源码之前，首先还是要对他的组件的大致功能有一个了解，这样我们在看源码的时候才会知道这一段大概实现了什么功能。最后我实现的功能文档以及最终的一个样例
在你实现一个组件过程中，一定要注意一下几点
将代码模块化并且分离。如果你将大量的逻辑或者是代码都放在钩子函数中（比如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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82985.html
摘要：本文章从如下图所示的最基本的入手，分析组件源代码。本人已经对组件原来的源码进行削减，源码点击这里下载。还有两个重要的函数与。在组件的阶段会调用更新，从而触发重新渲染。例如当组件加载后发送请求，待请求响应赋值，重新渲染。 本文章从如下图所示的最基本的table入手，分析table组件源代码。本人已经对table组件原来的源码进行削减，源码点击这里下载。本文只对重要的代码片段进行讲解，推荐...
摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台 系列一(基础篇)系类文章二：手摸手，带你用vue撸后台 系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台 系列三(实战篇）系类文章四：手摸手，带你用vue撸后台 系列...
摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台 系列一(基础篇)系类文章二：手摸手，带你用vue撸后台 系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台 系列三(实战篇）系类文章四：手摸手，带你用vue撸后台 系列...
摘要：下面一步步拆解上述流程。切换至分支检测本地和暂存区是否还有未提交的文件检测本地分支是否有误检测本地分支是否落后远程分支发布发布检测到在分支上没有冲突后，立即执行。 背景 最近一直在着手做一个与业务强相关的组件库，一直在思考要从哪里下手，怎么来设计这个组件库，因为业务上一直在使用ElementUI（以下简称Element），于是想参考了一下Element组件库的设计，看看Element构...
摘要：源码真的这么可怕吗从以上的事例中可以看出，其实并没有。对于源码的恐惧，让我们渐渐思维固化，自己告诉自己不要去碰源码，时间长了就遗忘了还有这样一条路可走。 一个小需求 事情的起因，是昨天有一个新的需求被提出。 需求是要实现，让我们自己定制的弹出层，具备按下 ESC 也能退出的功能。我把任务交给了同组的小伙伴S去实现。（这个项目用到了vue技术栈，以及饿了么的UI框架。） 我开完会回来，发...
阅读 1207·2021-09-23 11:51
阅读 1182·2021-09-04 16:45
阅读 558·2019-08-30 15:54
阅读 2028·2019-08-30 15:52
阅读 1539·2019-08-30 11:17
阅读 3049·2019-08-29 13:59
阅读 1947·2019-08-28 18:09
阅读 332·2019-08-26 12:15
