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

Posted 2023-03-22

参考技术A store文件夹：为table设计了一组私有的store数据，类似（vuex, redux)，这个一会详细讲。
config.js: 一些配置和默认信息，包括默认宽度之类的
dropdown.js: 提供点击后产生dropdown的一些基础方法
filter-panel.vue: 渲染过滤面板的
layout-observer.js: 布局使用的一个Observer，里面提供了一些基础方法，主要包括两点：1.column变化时，动态更新显示宽度，2.table在进行滚动时，计算滚动位置。
table-body, table-column, table-footer, table-header,这个四个顾名思义都是分别负责渲染对应的body,column,footer,header
table-layout.js: 定义了一个TableLayout的基础类，内部建立了一个观察者模式。
table.vue: 组合上面几个渲染模块，渲染整个table组件
util.js: 一些工具方法

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

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

current.js
current.js主要是处理current row变化的方法，row数据变更，以及事件的抛出。
expand.js
expand文件主要提供处理扩展行的几个方法
tree.js
tree.js主要是提供了树形数据的节点更新，序列化等方法

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

helper这里理解为提供createStore, mapStates两个方法，
createStore方法主要是创建store对象，而mapState提供了把state映射到实例数据上的功能。在table.vue中使用创建store

在data中创建store