4

PrimeVue で Vue3 を使用しており、構成ファイルに基づいて動的なテーブル ヘッダー セクションを作成したいと考えています。列グループhttps://primefaces.org/primevue/showcase/#/datatable/colgroupのドキュメントからサンプル コードを変更しました。

ヘッダーをハードコーディングする場合、すべて問題ありません

<template>
  <div id="app">
    <p-data-table>
      <p-column-group type="header">
        <p-row>
          <p-column header="Section 1" :rowspan="4" :colspan="1" />
          <p-column header="Section 2" :rowspan="1" :colspan="2" />
          <p-column header="Section 3" :rowspan="1" :colspan="3" />
          <p-column header="Section 4" :rowspan="1" :colspan="1" />
        </p-row>
        <p-row>
          <p-column header="Section 2.1" :rowspan="3" :colspan="1" />
          <p-column header="Section 2.2" :rowspan="3" :colspan="1" />
          <p-column header="Section 3.1" :rowspan="3" :colspan="1" />
          <p-column header="Section 3.2" :rowspan="1" :colspan="2" />
          <p-column header="Section 4.1" :rowspan="1" :colspan="1" />
        </p-row>
        <p-row>
          <p-column header="Section 3.2.1" :rowspan="2" :colspan="1" />
          <p-column header="Section 3.2.2" :rowspan="2" :colspan="1" />
          <p-column header="Section 4.1.1" :rowspan="1" :colspan="1" />
        </p-row>
        <p-row>
          <p-column header="Section 4.1.1.1" :rowspan="1" :colspan="1" />
        </p-row>
      </p-column-group>
    </p-data-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Row from "primevue/row";
import ColumnGroup from "primevue/columngroup";

export default defineComponent({
  components: {
    "p-data-table": DataTable,
    "p-column": Column,
    "p-row": Row,
    "p-column-group": ColumnGroup,
  }
});
</script>

生成された出力は期待どおりです

ここに画像の説明を入力

ここで動作中のライブデモを見ることができます

そのようなコードからハードコードされたヘッダーをロードしようとすると

<template>
  <div id="app">
    <p-data-table>
      <p-column-group type="header">
        <p-row
          v-for="(columnHeaderRow, columnHeaderRowIndex) in columnHeaderRows"
          :key="`columnHeaderRow-${columnHeaderRowIndex}`"
        >
          <p-column
            v-for="(columnHeader, columnHeaderIndex) in columnHeaderRow"
            :key="`columnHeader-${columnHeaderIndex}`"
            :header="columnHeader.header"
            :rowspan="columnHeader.rowspan"
            :colspan="columnHeader.colspan"
          />
        </p-row>
      </p-column-group>
    </p-data-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Row from "primevue/row";
import ColumnGroup from "primevue/columngroup";

export default defineComponent({
  components: {
    "p-data-table": DataTable,
    "p-column": Column,
    "p-row": Row,
    "p-column-group": ColumnGroup,
  },
  setup() {
    const columnHeaderRows = ref([
      [
        { header: "Section 1", rowspan: "4", colspan: "1" },
        { header: "Section 2", rowspan: "1", colspan: "2" },
        { header: "Section 3", rowspan: "1", colspan: "3" },
        { header: "Section 4", rowspan: "1", colspan: "1" },
      ],
      [
        { header: "Section 2.1", rowspan: "3", colspan: "1" },
        { header: "Section 2.2", rowspan: "3", colspan: "1" },
        { header: "Section 3.1", rowspan: "3", colspan: "1" },
        { header: "Section 3.2", rowspan: "1", colspan: "2" },
        { header: "Section 4.1", rowspan: "1", colspan: "1" },
      ],
      [
        { header: "Section 3.2.1", rowspan: "2", colspan: "1" },
        { header: "Section 3.2.2", rowspan: "2", colspan: "1" },
        { header: "Section 4.1.1", rowspan: "1", colspan: "1" },
      ],
      [{ header: "Section 4.1.1.1", rowspan: "1", colspan: "1" }],
    ]);

    return { columnHeaderRows };
  },
});
</script>

次のエラーが表示されます

キャッチされていない TypeError: row.children.default は関数ではありません

ここに画像の説明を入力

ここでエラーを示すデモを見ることができます

誰かが何が間違っていて、それを修正する方法を知っていますか?

4

1 に答える 1

1

これは既知のバグですhttps://github.com/primefaces/primevue/issues/1630

マスターで既に修正されています https://github.com/primefaces/primevue/commit/a51f26ce40ae4dc6df35a457f13a2d400604410a

于 2021-11-15T07:53:06.907 に答える