> 웹 프론트엔드 > JS 튜토리얼 > Element UI 테이블 컴포넌트의 소스 코드에 대한 상세한 분석

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

不言
풀어 주다: 2018-07-25 10:23:39
원래의
3973명이 탐색했습니다.

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

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

초기화 순서

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿