Element UI 테이블 컴포넌트의 소스 코드에 대한 상세한 분석

본 글은 아래 그림과 같이 가장 기본적인 테이블로 시작하여 테이블 컴포넌트 소스코드를 분석합니다. 테이블 컴포넌트의 원본 소스코드를 잘라냈습니다. 이 문서에서는 중요한 코드 조각만 설명합니다. 프로젝트를 실행하려면 코드를 다운로드하고 문서와 함께 읽는 것이 좋습니다.

Idea

<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도 있습니다.

초기화 순서

table

1. 스토어 초기화

   data() {
     const store = new TableStore(this);
     return {
       store,
     };
   }

2. 스토어를 테이블 헤더, 테이블 본문에 공유

       <p>
         <table-header></table-header>
       </p>
   
       <p>
         <table-body></table-body>
       </p>

3. The table에 저장할 저장 데이터- body는 데이터를 가져와 렌더링합니다

   watch: {
       data: {
         immediate: true,
         handler(value) {
           // 供 table-body computed.data 使用 
           this.store.commit('setData', value);
           // ......
         }
       },
   },

4. tableId를 설정

   created() {
         //.....
         this.tableId = `el-table_${tableIdSeed}`;
         //.....
     }

5. updateColumns를 호출하여 테이블 헤더 및 테이블 본문 보조 렌더링 업데이트를 트리거하고 마운트된 완료를 표시합니다

   mounted() {
       // .....
       this.store.updateColumns();
       // .....
       this.$ready = true;
   }

table-column

1. 열 생성 및 열 바인딩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>;
         };
     
   }

2. 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라는 두 가지 중요한 함수도 있습니다.

1. 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);
       }
   
       // .....
     },
   }

2. 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

table-header, table-body는 모두 다음 속성을 갖습니다. 으아악

이 두 구성 요소의 작동 원리는 열 데이터의 변경 사항을 모니터링하여 렌더링 렌더링을 트리거하는 것입니다. 테이블 구성요소의 마운트 단계에서 updateColumns가 호출되어 열을 업데이트하므로 테이블 헤더 및 테이블 본문이 다시 렌더링됩니다.

또한 table-body는 데이터 변경 사항을 모니터링하고 렌더링을 트리거합니다. 예를 들어 구성 요소가 로드되면 요청이 전송되고 데이터가 요청 응답에 할당되며 테이블 본문이 다시 렌더링됩니다.

props: {
    store: {
      required: true
    },
}

computed: {
    columns() {
      return this.store.states.columns;
    },
},

render(){
    // 渲染columns的数据
}

관련 권장 사항:

React 구성 요소에서 이것을 바인딩하는 이유 분석

Vue 소스 코드의 일괄 비동기 업데이트 및 nextTick 원칙 분석

위 내용은 Element UI 테이블 컴포넌트의 소스 코드에 대한 상세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!