Element UI table组件部分源码解读（store部分)

store文件夹：为table设计了一组私有的store数据，类似（vuex, redux)，这个一会详细讲。

configjs: 一些配置和默认信息，包括默认宽度之类的

dropdownjs: 提供点击后产生dropdown的一些基础方法

filter-panelvue: 渲染过滤面板的

layout-observerjs: 布局使用的一个Observer，里面提供了一些基础方法，主要包括两点：1column变化时，动态更新显示宽度，2table在进行滚动时，计算滚动位置。

table-body, table-column, table-footer, table-header,这个四个顾名思义都是分别负责渲染对应的body,column,footer,header

table-layoutjs: 定义了一个TableLayout的基础类，内部建立了一个观察者模式。

tablevue: 组合上面几个渲染模块，渲染整个table组件

utiljs: 一些工具方法

Watcher实际上是利用vue构造出的一个子类，提供了state状态包括列数据、选择数据、过滤数据、排序数据等，并且提供了一些列数据处理的方法（排序，过滤等）。

这里将这三个文件的内容通过mixin混入

currentjs

currentjs主要是处理current row变化的方法，row数据变更，以及事件的抛出。

expandjs

expand文件主要提供处理扩展行的几个方法

treejs

treejs主要是提供了树形数据的节点更新，序列化等方法

这里为watcher添加了mutations的原型方法，熟悉store设计理念的都能理解，修改store数据必须要通过mutation方法保证数据流向的清晰

helper这里理解为提供createStore, mapStates两个方法，

createStore方法主要是创建store对象，而mapState提供了把state映射到实例数据上的功能。在tablevue中使用创建store

在data中创建store

问题： 在使用element-ui时设计到一个需求就是带分页的表格翻页后要记忆勾选状态。

解决： 

坑点：1： 此API是column的API，必须设置列的勾选记忆状态而非table的。 2：当你手动调用toggleRowSelection 方法修改行的勾选时可能会出现已勾选数据重复的问题  3，再次打开时会记忆之前的选中状态，在编辑的时候就会出现一些问题

获取到表格数据后或者分页请求到数据之后，用table的ref获取到table实例，调用toggleRowSelection 对表格数据进行遍历，勾选上之前选中的数据

Vue ElementUI el-table

stockspecvue

网站入口

el-table 的文档里有很多的例子可以参考，这里记录一些我碰到的问题

但是这里有一个问题，如果希望表格占满页面，并且随着页面缩放同步变化应该怎么办。解决方法：可以用windowonresize方法来动态调整table的height

以上一些都只是提供了解决方法，没有对方法进行详细介绍，可以自行搜索用法。个人感觉consolelog是最实用的方法之一。

上面写法在实际使用中发现了问题，就是只能选中默认的第一页，之后其他页的多选框没有选中；但是thisshowSelectList中已经读取到从编辑接口获取到的数据。

解决办法：

在点击入口事件的时候，就开始多选绑定，绑定发生在调用接口之前。

在开发vue框架项目时，引入element插件，使用table表格组件时，遇到了一些问题，以下列出以供参考。

如上图，在当前导航表格table样式是没问题的，但当我点击别的导航去到另外的页面，然后再回到之前的导航页面，表格table的样式就会混乱，随便点击当前页面或刷新亦或拉伸页面，样式又恢复正常,很奇怪的样式问题。

打开调试之后，发现table的宽度并没有按照100%来显示，而是根据表格宽度值来计算的（我这里是640px），并且在table标签底下发现了colgroup和col标签，colgroup包裹着对应单元格数的col,并且col的宽度为80px,瞬间恍然大悟，明白640px是怎么得来的，这里一共有8个单元格，880就是640px了，那要怎么解决这个默认样式呢？

一、给表格添加固定宽度

二、利用flex的特性

2table表格数据问题

table显示的数据并不是一成不变的，这里传入table的data需要有实时监控的功能，其中一个数据的改变就要及时显示，这里我用计算属性computed来进行监控。有时候后台返回的状态数据是0,1等等，我们也可以在里面进行判断渲染。

3table表格的排序、筛选

4表头添加Tooltip 文字提示

今天的心得就到这儿了，希望可以帮助到有需要的小伙伴儿O(∩_∩)O

以上就是关于Element UI table组件部分源码解读（store部分)全部的内容，包括:Element UI table组件部分源码解读（store部分)、element table 翻页 勾选记忆、第六篇 Element-ui中el-table的一些用法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！