element - ui 의 table 구성 요 소 를 우아 하 게 사용 합 니 다.

element - ui 를 자주 사용 하 는 파트너 는 el-table 구성 요소 에 대해 잘 알 고 있 을 것 입 니 다. 보통 아래 모양 이 이렇게 생 깁 니 다.

<span class="hljs-built_in">export</span> default {
  <span class="hljs-function"><span class="hljs-title">data</span></span> () {
    <span class="hljs-built_in">return</span> {
      tableData: [{
        date: <span class="hljs-string">'2016-05-02'</span>,
        name: <span class="hljs-string">'   '</span>,
        address: <span class="hljs-string">'           1518  '</span>
      }, {
        date: <span class="hljs-string">'2016-05-04'</span>,
        name: <span class="hljs-string">'   '</span>,
        address: <span class="hljs-string">'           1517  '</span>
      }]
    }
  }
}

위의 코드 는 매우 정확 하지만, 아무래도 무엇이 부족 하 다 고 생각 합 니까?
맞 아, 모델 중 el-table-column 은 거의 일치 해서 중복 적 었 어.
v - for 를 사용 하여 모델 중의 el - table - column 을 최적화 합 니 다.
다음은 v-for 버 전 을 사용 하여 각 열 을 하나의 설정 항목 으로 전송 합 니 다.

<span class="hljs-built_in">export</span> default {
  <span class="hljs-function"><span class="hljs-title">data</span></span> () {
    this.colConfigs = [
      { prop: <span class="hljs-string">'date'</span>, label: <span class="hljs-string">'  '</span> },
      { prop: <span class="hljs-string">'name'</span>, label: <span class="hljs-string">'  '</span> },
      { prop: <span class="hljs-string">'address'</span>, label: <span class="hljs-string">'  '</span> }
    ]
    <span class="hljs-built_in">return</span> {
      tableData: [{
        date: <span class="hljs-string">'2016-05-02'</span>,
        name: <span class="hljs-string">'   '</span>,
        address: <span class="hljs-string">'           1518  '</span>
      }, {
        date: <span class="hljs-string">'2016-05-04'</span>,
        name: <span class="hljs-string">'   '</span>,
        address: <span class="hljs-string">'           1517  '</span>
      }]
    }
  }
}

이렇게 하 는 장점 은 한 열 을 더 늘 리 려 면 움 직 이지 않 아 도 된다 는 것 이다 template. 간단하게 this.colConfigs 이 배열 에 설정 항목 { prop: 'xxx', label: 'xxx' } 을 추가 하면 된다 는 것 이다.
이렇게 설정 을 추가 하 는 것 은 매우 간단 하고 확장 성도 이전 보다 직접 모델 을 쓰 는 것 이 좋 지만 만약 에 제 가 몇 개의 단 추 를 렌 더 링 하려 고 한다 면 위의 방식 은 소 용이 없습니다.
다시 말 하면 우 리 는 간단 한 속성 을 원 하면 설정 항목 을 직접 추가 하여 렌 더 링 할 수 있 고 복잡 한 렌 더 링 이 모델 에 쓰 여 있 기 를 바 랍 니 다. 어떻게 실현 해 야 합 니까?
slot 를 교묘 하 게 사용 하여 el - table 을 한 층 밀봉 합 니 다.
우 리 는 먼저 봉 인 된 구성 요소 my-table 를 살 펴 보 자.

// my-table.vue



<span class="hljs-built_in">export</span> default {
  props: [<span class="hljs-string">'colConfigs'</span>, <span class="hljs-string">'data'</span>]
}

이 패 키 지 는 실제 적 으로 앞의 colConfigs 을 하나의 prop 로 전달 하 는 것 이다. 그러나 위의 예 와 조금 다른 것 은 설정 항목 에 하나의 slot 속성 이 더 생 겼 다 는 것 이다. 이 속성 을 통 해 우 리 는 글 의 처음에 처럼 모델 에 쓸 수 있다. 용법 은 다음 과 같다.

<span class="hljs-built_in">export</span> default {
  <span class="hljs-function"><span class="hljs-title">data</span></span> () {
    this.colConfigs = [
      { prop: <span class="hljs-string">'date'</span>, label: <span class="hljs-string">'  '</span> },
      { prop: <span class="hljs-string">'name'</span>, label: <span class="hljs-string">'  '</span> },
      { prop: <span class="hljs-string">'address'</span>, label: <span class="hljs-string">'  '</span> },
      //              slot=<span class="hljs-string">"opt"</span>   
      { slot: <span class="hljs-string">'opt'</span> }
    ]
    <span class="hljs-built_in">return</span> {
      tableData: [{
        date: <span class="hljs-string">'2016-05-02'</span>,
        name: <span class="hljs-string">'   '</span>,
        address: <span class="hljs-string">'           1518  '</span>
      }, {
        date: <span class="hljs-string">'2016-05-04'</span>,
        name: <span class="hljs-string">'   '</span>,
        address: <span class="hljs-string">'           1517  '</span>
      }]
    }
  }
}

지금 우 리 는 열 을 추가 하고 싶 습 니 다. 설정 항목 을 추가 하거나 slot 를 추가 하면 완벽 합 니 다 ~
잠시 만 요. 제 table 에 몇 개의 렌 더 링 이 복잡 하 다 고 가정 하면 그 몇 개의 열 은 모두 비슷 합 니 다. 아래 와 같 습 니 다.

다시 모판 을 썼 는데...
사용: is = "component"
저 희 는 설정 항목 에 속성 component 을 추가 할 수 있 습 니 다. 사용 자 는 component 속성 을 지정 하여 특정한 열 을 특수 처리 할 수 있 습 니 다. 다음 과 같이 실현 할 수 있 습 니 다.

// my-table.vue



<span class="hljs-built_in">export</span> default {
  props: [<span class="hljs-string">'colConfigs'</span>, <span class="hljs-string">'data'</span>]
}

그리고 위의 예 는 다음 과 같이 고 칠 수 있다.

const PrefixPlusText = {
  props: [<span class="hljs-string">'colConfig'</span>],
  template: `
    <el-table-column :label=<span class="hljs-string">"colConfig.label"</span>>
      <span :slot-scope=<span class="hljs-string">"{ row }"</span>>
        {
     { parseInt(row[colConfig.prop]) > 0 ? <span class="hljs-string">'+'</span> + row[colConfig.prop] : row[colConfig.prop] }}
      </span>
    </el-table-column>
  `
}

<span class="hljs-built_in">export</span> default {
  <span class="hljs-function"><span class="hljs-title">data</span></span> () {
    this.colConfigs = [
      { prop: <span class="hljs-string">'change'</span>, label: <span class="hljs-string">'  '</span> component: PrefixPlusText },
      { prop: <span class="hljs-string">'name'</span>, label: <span class="hljs-string">'  '</span>, component: PrefixPlusText },
    ]
    <span class="hljs-built_in">return</span> {
      tableData: [{
        change: <span class="hljs-string">'12%'</span>,
        trend: <span class="hljs-string">'10%
      }, {
        change: '</span>-12%<span class="hljs-string">',
        trend: '</span>-10%<span class="hljs-string">'
      }]
    }
  }
}

총결산
table 은 데이터 디 스 플레이 구성 요소 로 서 일상적인 개발 에 자주 사용 되 고 있 습 니 다. 이 글 을 통 해 결합 vue 의 특성 을 볼 수 있 습 니 다. 한 층 의 패 키 징 을 하면 table 의 사용 을 크게 간소화 할 수 있 습 니 다. 대부분 설정 속성 만 쓰 면 됩 니 다.
마지막 으로 데모 하나 드릴 게 요.