如何显示DataTable行，以便在列数超过20时使用多个行空间

Question

我有 Datatable，并且希望以使用多个行空间的方式显示行，因为列数超过 20。我尝试了自定义 css，但似乎不起作用。我正在使用 v-for 来循环遍历列。

 <DataTable
      :value="formattedSearchResults"
      dataKey="_id"
      responsiveLayout="scroll"
      :stripedRows="true"
      :rowHover="true"
      rowGroupMode="subheader"
      :row-class="rowClass"
      groupRowsBy="_id"
      :expandableRowGroups="true"
      v-model:expandedRowGroups="expandedHFRowGroups"
      @rowgroupExpand="onHFRowGroupExpand"
      @rowgroupCollapse="onHFRowGroupCollapse"
    >
      <template #empty> No results found. </template>
      <template #loading> Searching... </template>
      <template #groupheader="slotProps">
        <span>
          <v-icon icon="mdi-horse"></v-icon>
          <b>&nbsp;{{ slotProps.data.name }}</b> ({{
            slotProps.data.form_count
          }})</span
        >
      </template>
        <Column
          v-for="col in setHeadersForEntity()"
          :field="col.field"
          :key="col.field"
        >
          <template #body="slotProps">
            <div class="flex align-items-center gap-1">
              {{ formatColumnValue(slotProps) }}
            </div>
          </template>
        </Column>

      <Column
        headerStyle="width: 4rem; text-align: center"
        bodyStyle="text-align: center; overflow: visible"
      >
        <template #body="slotProps">
          <Button
            type="button"
            icon="pi pi-pencil"
            class="p-button-rounded p-button-text p-button-result-edit"
            @click="editEntity(slotProps.data, this.$route.query.entity)"
          ></Button>
          <Button
            type="button"
            icon="pi pi-times"
            class="p-button-rounded p-button-danger p-button-text p-button-result-delete"
            @click="deleteEntity(slotProps.data, this.$route.query.entity)"
          ></Button>
        </template>
      </Column>
    </DataTable>

如何解决这个问题？是否可以将模板包装在 div 中，或者我是否应该考虑 DataTable 之外的其他 Table 组件？

Answer 1

您可以将

Column

组件包装在

div

元素中，并将自定义 CSS 类应用于

div

来控制布局，如下所示：

<template>
  <DataTable
    :value="formattedSearchResults"
    dataKey="_id"
    responsiveLayout="scroll"
    :stripedRows="true"
    :rowHover="true"
    rowGroupMode="subheader"
    :row-class="rowClass"
    groupRowsBy="_id"
    :expandableRowGroups="true"
    v-model:expandedRowGroups="expandedHFRowGroups"
    @rowgroupExpand="onHFRowGroupExpand"
    @rowgroupCollapse="onHFRowGroupCollapse"
  >
    <template #empty> No results found. </template>
    <template #loading> Searching... </template>
    <template #groupheader="slotProps">
      <span>
        <v-icon icon="mdi-horse"></v-icon>
        <b>&nbsp;{{ slotProps.data.name }}</b> ({{ slotProps.data.form_count }})
      </span>
    </template>
    
    <div class="custom-row">
      <Column
        v-for="col in setHeadersForEntity()"
        :field="col.field"
        :key="col.field"
      >
        <template #body="slotProps">
          <div class="flex align-items-center gap-1">
            {{ formatColumnValue(slotProps) }}
          </div>
        </template>
      </Column>

      <Column
        headerStyle="width: 4rem; text-align: center"
        bodyStyle="text-align: center; overflow: visible"
      >
        <template #body="slotProps">
          <Button
            type="button"
            icon="pi pi-pencil"
            class="p-button-rounded p-button-text p-button-result-edit"
            @click="editEntity(slotProps.data, this.$route.query.entity)"
          ></Button>
          <Button
            type="button"
            icon="pi pi-times"
            class="p-button-rounded p-button-danger p-button-text p-button-result-delete"
            @click="deleteEntity(slotProps.data, this.$route.query.entity)"
          ></Button>
        </template>
      </Column>
    </div>
  </DataTable>
</template>

<style scoped>
.custom-row {
  display: flex;
  flex-wrap: wrap;
}
</style>

我将

Column

组件包装在带有

div

类的

custom-row

中。然后，我应用 CSS 使

div

显示为带包装的 Flex 容器。如果列数超过 20，这允许列跨越多行。您可以根据需要调整 CSS 以实现所需的布局。