本文章从如下图所示的最基本的table入手，分析table组件源代码。本人已经对table组件原来的源码进行削减。本文只对重要的代码片段进行讲解，推荐下载代码把项目运行起来，跟着文章的思路阅读。
思路
登录后复制
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
登录后复制
将数据存储到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); // //{{row.frequentlyUsed | formatBoolean}} // } if (!renderCell) {// table-header不渲染index列的走这里， /*王小虎
*/ renderCell = DEFAULT_RENDER_CELL; } // return {renderCell(createElement, data)}
; }; }
登录后复制
给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组件的源码的详细分析的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2745334.html
