본 글은 아래 그림과 같이 가장 기본적인 테이블로 시작하여 테이블 컴포넌트 소스코드를 분석합니다. 테이블 컴포넌트의 원본 소스코드를 잘라냈습니다. 이 문서에서는 중요한 코드 조각만 설명합니다. 프로젝트를 실행하려면 코드를 다운로드하고 문서와 함께 읽는 것이 좋습니다.
<template> <p> <!-- 隐藏列: slot里容纳table-column --> </p> <p> <slot></slot> </p> <p> <table-header> </table-header> </p> <p> <table-body> </table-body> </p> </template>
테이블, 테이블 헤더, 테이블 본문, 테이블 컬럼은 테이블 스토어를 통해 관리됩니다. table-header 및 table-body는 table-store 데이터를 모니터링하고, table-header 및 table-body를 트리거하여 테이블이 table-store 데이터를 변경할 때마다 다시 렌더링합니다.
table-column은 테이블 본문을 렌더링할 때 사용할 수 있도록 해당 renderCell 함수를 열 데이터 열에 바인딩합니다. 테이블-열 구성 요소 자체는 렌더링을 수행하지 않습니다. 따라서 템플릿이 이를 숨기는 것을 볼 수 있습니다. render 함수를 통해 렌더링되는 table-header와 table-body도 있습니다.
스토어 초기화
data() { const store = new TableStore(this); return { store, }; }
스토어를 테이블 헤더, 테이블 본문에 공유
<p> <table-header></table-header> </p> <p> <table-body></table-body> </p>
The table에 저장할 저장 데이터- body는 데이터를 가져와 렌더링합니다
watch: { data: { immediate: true, handler(value) { // 供 table-body computed.data 使用 this.store.commit('setData', value); // ...... } }, },
tableId를 설정
created() { //..... this.tableId = `el-table_${tableIdSeed}`; //..... }
updateColumns를 호출하여 테이블 헤더 및 테이블 본문 보조 렌더링 업데이트를 트리거하고 마운트된 완료를 표시합니다
mounted() { // ..... this.store.updateColumns(); // ..... this.$ready = true; }
열 생성 및 열 바인딩renderCell函数
테이블 본문 사용을 위해
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> //<span>{{row.frequentlyUsed | formatBoolean}}</span> //</template> } if (!renderCell) {// table-header不渲染index列的走这里, /*<p>王小虎</p>*/ renderCell = DEFAULT_RENDER_CELL; } // <eltablecolumn></eltablecolumn> return <p>{renderCell(createElement, data)}</p>; }; }
store.state._columns 배열을 데이터로 채웁니다.
mounted() { // ...... owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null); }
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를 필터링하여 열을 가져옵니다.
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는 모두 다음 속성을 갖습니다. 으아악
이 두 구성 요소의 작동 원리는 열 데이터의 변경 사항을 모니터링하여 렌더링 렌더링을 트리거하는 것입니다. 테이블 구성요소의 마운트 단계에서 updateColumns가 호출되어 열을 업데이트하므로 테이블 헤더 및 테이블 본문이 다시 렌더링됩니다. 또한 table-body는 데이터 변경 사항을 모니터링하고 렌더링을 트리거합니다. 예를 들어 구성 요소가 로드되면 요청이 전송되고 데이터가 요청 응답에 할당되며 테이블 본문이 다시 렌더링됩니다.props: { store: { required: true }, } computed: { columns() { return this.store.states.columns; }, }, render(){ // 渲染columns的数据 }
위 내용은 Element UI 테이블 컴포넌트의 소스 코드에 대한 상세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!