本文章从如下图所示的最基本的table入手，分析table组件源代码。本人已经对table组件原来的源码进行削减。本文只对重要的代码片段进行讲解，推荐下载代码把项目运行起来，跟着文章的思路阅读。
思路
<template>
<p class="el-table">
<!-- 隐藏列: slot里容纳table-column -->
<p class="hidden-columns" ref="hiddenColumns">
<slot></slot>
</p>
<p class="el-table__header-wrapper"
ref="headerWrapper">
<table-header ref="tableHeader"
:store="store">
</table-header>
</p>
<p class="el-table__body-wrapper"
ref="bodyWrapper">
<table-body :context="context"
:store="store">
</table-body>
</p>
</p>
</template>登录后复制
table、table-header、table-body、table-column之间通过table-store进行状态管理。table-header、table-body对table-store数据进行监听，每当table改变table-store数据时触发table-header、table-body重新渲染。
table-column为列数据column绑定相应的renderCell函数，供table-body渲染时使用。table-column这个组件自身不做任何渲染。所以会看到模板将其隐藏。还有就是table-header、table-body通过render函数进行渲染。
初始化顺序
table
-
初始化store
data() {
const store = new TableStore(this);
return {
store,
};
}登录后复制
-
将store共享给table-header、table-body
<p class="el-table__header-wrapper"
ref="headerWrapper">
<table-header :store="store"></table-header>
</p>
<p class="el-table__body-wrapper"
ref="bodyWrapper">
<table-body :store="store"></table-body>
</p>登录后复制
-
将数据存储到store，供table-body获取data将其渲染
watch: {
data: {
immediate: true,
handler(value) {
// 供 table-body computed.data 使用
this.store.commit('setData', value);
// ......
}
},
},登录后复制
-
设置tableId
created() {
//.....
this.tableId = `el-table_${tableIdSeed}`;
//.....
}登录后复制
-
调用 updateColumns 触发 table-header、table-body 二次render更新,标记mounted完成
mounted() {
// .....
this.store.updateColumns();
// .....
this.$ready = true;
}登录后复制
table-column
-
生成column，并为column绑定renderCell函数供table-body使用
created(){
// .........
let column = getDefaultColumn(type, {
id: this.columnId,
columnKey: this.columnKey,
label: this.label,
property: this.prop || this.property,// 旧版element ui为property，现在的版本是prop
type, // selection、index、expand
renderCell: null,
renderHeader: this.renderHeader, // 提供给table-column， table-column.js line 112
width,
formatter: this.formatter,
context: this.context,
index: this.index,
});
// .........
// 提table-body使用， table-body.js line 69
column.renderCell = function (createElement, data) {
if (_self.$scopedSlots.default) {
renderCell = () => _self.$scopedSlots.default(data);
//<template slot-scope="{row}">
//<span>{{row.frequentlyUsed | formatBoolean}}</span>
//</template>
}
if (!renderCell) {// table-header不渲染index列的走这里，
/*<p className="cell">王小虎</p>*/
renderCell = DEFAULT_RENDER_CELL;
}
// <ElTableColumn
// type="index"
// width="50"/>
return <p className="cell">{renderCell(createElement, data)}</p>;
};
}登录后复制
-
给store.state._columns数组填充数据
mounted() {
// ......
owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
}登录后复制
table-store
table-store有两个很重要的属性_columns、data，_columns保存列的相关信息，data则保存开发者传入的表格数据。还有两个重要的函数insertColumn与updateColumns。
-
insertColumn为_columns填充数据
TableStore.prototype.mutations = {
insertColumn(states, column, index, parent) {
let array = states._columns;
// ......
if (typeof index !== 'undefined') {
// 在index的位置插入column
array.splice(index, 0, column);
} else {
array.push(column);
}
// .....
},
}登录后复制
-
updateColumns 对_columns进行过滤得到columns
TableStore.prototype.updateColumns = function() {
const states = this.states;
const _columns = states._columns || [];
const notFixedColumns = _columns.filter(column => !column.fixed);
// .....
const leafColumns = doFlattenColumns(notFixedColumns);
// .....
states.columns = [].concat(leafColumns);
// ....
}登录后复制
table-header、table-body
table-header、table-body都拥有以下属性
props: {
store: {
required: true
},
}
computed: {
columns() {
return this.store.states.columns;
},
},
render(){
// 渲染columns的数据
}登录后复制
这两个组件的工作原理是监听columns数据变化以触发render渲染。在table组件的mounted阶段会调用 updateColumns 更新 columns，从而触发 table-header、table-body 重新渲染。
另外table-body还会监听data变化，触发render。例如当组件加载后发送请求，待请求响应赋值data，重新渲染table-body。
computed: {
data() {
// table.vue watch.data 中 调用 setData 在store 中存储 data
return this.store.states.data;
},
},登录后复制
相关推荐：
React组件中绑定this的原因分析
Vue源码中批量异步更新与nextTick原理的解析以上是对Element UI table组件的源码的详细分析的详细内容。更多信息请关注PHP中文网其他相关文章！
