v-data-table 数据的水平表示

问题描述

Desired Results

就像 v-data-table 中的图片。 可以用rowspan来表达吗?

或者如果你使用span改变行和列,你能像这样表达数据吗?

ex) 当 test1 中的一个 item 接收到下一个人(test2)的 item 的值时,它被确定为一个新值并显示在下一行。

请告诉我如何解决它。

Current Progress

<v-data-table
      sort-by="class"
      group-by="class"
      :group-desc="[true]"
      :headers="headers"
      :items="items"
      :search="search"
      :loading="loading"
      loading-text="Loading... Please wait"
      hide-default-footer
      class="elevation-1"
    >
     <!-- Modify Here
      <template #[`item.class`]="{ item }">
        <tr v-for="i in items" :key="i.class === 10">
          <td :rowspan="[items.length]">
            {{ item.name }}
          </td>
        </tr>
      </template>
-->
      <template #[`item.employee_avatar`]="{ item }">
        <v-img
          :src="require('@/' + item.imgsrc)"
          style="width: 100px; height: 100px"
        />
      </template>
      <template #[`item.name`]="{ item }">
        <a
          target="_blank"
          :href="`.../list:${item.name}`"
        >
          {{ item.name }}
        </a>
</template>
</v-data-table>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)