Vue.js - 마지막 항목 손실 시 요소-ui el-table v-for

Vue.js - 마지막 항목 손실 시 요소-ui el-table v-for

제목 목록으로 그룹화 테이블 헤드를 생성하려고 하는데, v-for 루프가 마지막 항목 하나를 잃어버렸어.

html 템플릿 코드:

<div id="app">
  <el-table :data="tableData" stripe highlight-current-row height="100%">
    <template v-for="title in titles">
      <el-table-column v-if="typeof title === 'object'" :key="title" fixed :prop="Object.entries(title)[0][0]"
                       :label="Object.entries(title)[0][0]">
        <el-table-column v-for="subtitle in Object.entries(title)[0][1]" :key="subtitle" fixed :prop="subtitle"
                         :label="subtitle">
        </el-table-column>

      </el-table-column>
      <el-table-column v-else :key="title" fixed :prop="title" :label="title">
      </el-table-column>
    </template>
  </el-table>
</div>

JavaScript 코드:

new Vue({
  el: "#app",
  data() {
    return {
      titles: [
        "title 1",
        { "title 2": ["title 2-1", "title 2-2"] },
        "title 3",
        "title 4"
      ]
    };
  }
});

렌더 결과는 다음과 같다.

내 문제는 마지막 항목인 "제4 제목"이 표시되지 않고 빈칸만 남았다는 거야, 누군가 나를 도와줄 수 있기를 바라.

원소-의 테이블 문서, 데모 코드가 여기에 있다.

몇 가지 디버깅을 한 후 나는 다음과 같은 것을 알게 되었다.fixed소품 추가is-hidden로 분류하다.th숨기는 요소the title4그리고 다른 것을 숨기지 않는다(왜 이런 일이 일어나는지 이해할 수 없다!!), 이것을 해결하기 위해 나는 그 문제를 제거하려고 노력했다.fixed조건부 렌더링을 역방향으로 설정:

  <el-table :data="tableData" stripe highlight-current-row height="100%">
    <template v-for="(title,index) in titles">
         <el-table-column  v-if="typeof title !== 'object'" :key="title"  :prop="title" :label="title">
      </el-table-column>
      <template v-else>
      <el-table-column  :prop="Object.entries(title)[0][0]" :label="Object.entries(title)[0][0]">
        <el-table-column v-for="subtitle in Object.entries(title)[0][1]" :key="subtitle" fixed :prop="subtitle" :label="subtitle">
        </el-table-column>

      </el-table-column>
       </template>
    </template>
  </el-table>

데모

참조URL: https://stackoverflow.com/questions/63099065/vue-js-element-ui-el-table-v-for-lost-the-last-item