vue.js는 테이블 병합 샘플 코드를 구현합니다.

머리말

Vue를 사용하고 있기 때문에 MVVM은 데이터 중심이어야 한다고 생각하므로 데이터를 렌더링한 다음 DOM 작업을 수행하는 대신 모델에서 트릭을 수행하는 것을 고려합니다. 물론 기본입니다. CSS는 여전히 필요합니다. 따라서 이 방법은 Angular 및 React와 같은 모든 데이터 기반 프레임워크에 유효합니다.

구현 아이디어

원래 정규형의 코드는 다음과 같습니다.

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="15%">{{item.bsO_Name}}</td>
 <td width="8%" :class="{&#39;overtime&#39;: overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%">{{item.F1}}</td>
 <td width="5%">{{item.F2}}</td>
 <td width="5%">{{item.F4}}</td>
 <td width="5%">{{item.F3}}</td>
 <td width="5%">{{item.F5}}</td>
 <td width="5%">{{item.F6}}</td>
 <td width="5%">{{item.F7}}</td>
 <td width="5%">{{item.F8}}</td>
 <td width="5%">{{item.F9}}</td>
 <td width="5%">{{item.F10}}</td>
</tr>

먼저 테스트를 위해 정규형을 사용하고, 네이티브 레이블에는 셀 행 병합을 지원하는 rowspan 속성이 있습니다. 속성 값은 아래쪽으로 병합되는 행 수를 나타냅니다. 실제로 이 행에서 아래쪽으로 셀을 몇 개 더 추가하는 것과 같습니다.

다음 행이 여전히 렌더링되면 압착되므로 아래 병합된 셀을 숨겨야 하며 이는 디스플레이로 제어할 수 있습니다. 없음;

따라서 각 태그에는 각 셀의 병합된 행 수와 표시 여부를 제어하기 위해 rowspan과 display라는 두 가지 속성 값이 있어야 합니다.

코드는 이렇게 됩니다

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="10%" :rowspan="item.bsO_Namespan" :class="{hidden: item.bsO_Namedis}">{{item.bsO_Name}}</td>
 <td width="8%" :rowspan="item.GathDtspan" :class="{hidden: item.GathDtdis}" :class="{overtime: overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%" :rowspan="item.F1span"  :class="{hidden: item.F1dis}">{{item.F1}}</td>
 <td width="5%" :rowspan="item.F2span"  :class="{hidden: item.F2dis}">{{item.F2}}</td>
 <td width="5%" :rowspan="item.F3span"  :class="{hidden: item.F3dis}">{{item.F3}}</td>
 <td width="5%" :rowspan="item.F4span"  :class="{hidden: item.F4dis}">{{item.F4}}</td>
 <td width="5%" :rowspan="item.F5span"  :class="{hidden: item.F5dis}">{{item.F5}}</td>
 <td width="10%" :rowspan="item.F6span"  :class="{hidden: item.F6dis}">{{item.F6}}</td>
 <td width="8%" :rowspan="item.F7span"  :class="{hidden: item.F7dis}" :class="{overtime: overtime(item.F7)}">{{item.F7 | time}}</td>
 <td width="5%" :rowspan="item.F8span"  :class="{hidden: item.F8dis}">{{item.F8}}</td>
 <td width="5%" :rowspan="item.F9span"  :class="{hidden: item.F9dis}">{{item.F9}}</td>
 <td width="5%" :rowspan="item.F10span"  :class="{hidden: item.F10dis}">{{item.F10}}</td>
 <td width="5%" :rowspan="item.F11span"  :class="{hidden: item.F11dis}">{{item.F11}}</td>
</tr>

그 중 이 두 속성에는 몇 가지 특성이 있습니다.

표시하려면 셀 행 범위가 >1이고 다음 행 번호를 기록합니다

표시할 셀 표시가 true입니다

표시되지 않는 다음 셀 행 범위가 1이고 표시됩니다. is false

데이터 rowspan이 한 행만 있는 셀이 1이고 표시가 true입니다

사실 입력 테이블 배열에 대한 알고리즘을 설계하는 것입니다. 각 데이터 항목에 rowspan과 display 두 개의 속성을 추가하고, 이 열에 다음과 같은 동일한 값을 사용하여 rowspan 값이

인 행 수를 계산하고 표시 값이 기반인지 여부를 계산합니다. rowspan 값에 표시하고 마지막으로 변경된 배열을 출력합니다.

샘플 코드 풀기

function combineCell(list) {
 for (field in list[0]) {
  var k = 0;
  while (k < list.length) {
   list[k][field + &#39;span&#39;] = 1;
   list[k][field + &#39;dis&#39;] = false;
   for (var i = k + 1; i <= list.length - 1; i++) {
    if (list[k][field] == list[i][field] && list[k][field] != &#39;&#39;) {
     list[k][field + &#39;span&#39;]++;
     list[k][field + &#39;dis&#39;] = false;
     list[i][field + &#39;span&#39;] = 1;
     list[i][field + &#39;dis&#39;] = true;
    } else {
     break;
    }
   }
   k = i;
  }
 }
 return list;
}

요약

코드는 실제로 매우 짧고 간단하며 주로 kmp를 사용합니다. 아이디어는 포인터 k를 정의하여 첫 번째 값을 가리키기 시작한 다음 이를 아래쪽으로 비교하여 행 범위를 설정하고 표시하는 것입니다.

다른 값이 발견되면 다음과 같이 판단됩니다. 다음 루프에서는 이 과정에서 계산된 행 수에 알림 포인터 k를 더해 점프한 후 다음 셀의 값을 비교하는데, 이는 kmp 포인터 점프와 동일한 원리입니다. 동일한 문자열을 결정합니다.

combineCell() 함수를 사용하면 네트워크 요청에서 반환된 데이터를 필터링하고 해당 값을 추가한 다음 vue에서 모니터링하는 배열에 값을 할당할 수 있습니다.

사실 이 방법은 vue뿐만 아니라 Angular 및 React를 포함한 데이터 기반 프레임워크에도 적용할 수 있습니다. 테이블 병합을 수행하려면 다음에서 반환되는 값을 필터링하면 됩니다. 요청.