可以在Vuetify数据表中创建多行标题吗?

xesrikrc  于 2023-11-21  发布在  Vue.js
关注(0)|答案(4)|浏览(158)

我想创建一个带有多行标题的表,就像this example一样。
我已经找到了this post,但答案不起作用。此外,我已经看了Vuetify文档和Github问题,但似乎没有解决方案。
如果有人能让我知道这样的事情是否可能,如果可能的话,那就太好了。

j7dteeu8

j7dteeu81#

如果你在slot模板中添加<thead>,你可以在默认标题的上方实现你自己的categories行,去掉<thead>,它就在下面。

<v-data-table ...>
  <template v-slot:header="props" >
    <thead>
      <tr>
        <th colspan="2">Category 1</th>
        <th colspan="3">Category 2</th>
      </tr>
    </thead>
  </template>
</v-data-table>

字符串

epfja78i

epfja78i2#

你可以使用slot=“headerCell”。注意这里使用的Vuetify版本是1.5.11
这里有一个示例,可能会给你给予一些提示:

<v-data-table
    v-bind:headers="headers"
    v-bind:items="items"
    v-bind:search="search"
    v-bind:pagination.sync="pagination"
    hide-actions
    class="elevation-1"
>
  <template slot="headerCell" scope="props">
    <div slot="activator">
      {{ props.header.text }}
    </div>
    <div>
       <span>A</span>
       <span>||</span>
       <span>B</span>
    </div>
    </template>
    <template slot="items" scope="props">
      .....
    </template>
  </v-data-table>

字符串
下面是codepen链接:https://codepen.io/nizantz/pen/KYyLOp

68de4m5k

68de4m5k3#

核心代码

<v-data-table :headers="surgeryInformationHeaders" :items="surgeryInformationDesserts" hide-default-footer class="transparent elevation-0 my-4" hide-default-header disable-pagination disable-sort :items-per-page="5">
      <template #header="{ }">
        <thead class="v-data-table-header">
          <tr>
            <th v-for="(h,i) in surgeryInformationHeaders" :key="i" class="text-center parent-header td-border-style" :rowspan="h.children?1:2" :colspan="h.children?h.children.length:1">
              {{ h.text }}
            </th>
          </tr>
          <tr>
            <th v-for="(h1,i1) in getSubHeader(surgeryInformationHeaders)" :key="i1" class="text-center child-header td-border-style">
              {{ h1.text }}
            </th>
          </tr>
        </thead>
      </template>
      <template #item="props">
        <tr>
          <td v-for="(c,ci) in getRows(props.item)" :key="ci">
            {{ c }}
          </td>
        </tr>
      </template>
    </v-data-table>

这里是代码打开链接https://codepen.io/sunhao1256/pen/MWeZyMe

vuktfyat

vuktfyat4#

下面是另一个示例,可能会帮助您的情况下,根据您的评论注意,数据结构需要在正确的格式。(子元素)
Vue-Template:

<div id="app">
          <v-data-table
          :headers="headersTop"
          :items="tableitems"
          hide-actions
          >
      <template slot="items" scope="props">
        <td>
          <v-data-table
            :headers="[{text:'First Name', value:'fname', sortable:false},
                      {text:'Last Name', value:'lname', sortable:false}
                      ]"
            :items="props.item.name"
            hide-actions                    
          >
            <template slot="items" scope="props">
              <td>{{props.item.fname}}</td>
              <td>{{props.item.lname}}</td>
            </template>
          </v-data-table>
        </td>
        <td>
          <v-data-table
            :headers="[{text:'Country', value:'country', sortable:false},
                      {text:'City', value:'city', sortable:false}
                      ]"
            :items="props.item.geo"
            hide-actions
          >
            <template slot="items" scope="props">
              <td>{{props.item.country}}</td>
              <td>{{props.item.city}}</td>
            </template>
          </v-data-table>
        </td>
      </template>
      </v-data-table>
    </div>

字符串
脚本:

new Vue({
      el: '#app',
      data () {
        return {
          pagination: {},
          headersTop:[
            {
              text: 'Name',
              value: 'name',
              sortable: false,
            },
            {
              text: 'Geo',
              value: 'geo',
              sortable: false,
            }
          ],
        tableitems:[{
            name: [{
                fname: 'Dakota',
                lname: 'Rice'
              },
              {
                fname: 'Minerva',
                lname: 'Hooper'
              }],
            geo: [{
                    country: 'Niger',
                    city: 'Oud-Tunrhout',            
                  },
                  {
                    country: 'Curaçao',
                    city: 'Sinaai-Waas',
                  }]
            }]
          }
        }
    })


这里是codepen链接:https://codepen.io/nizantz/pen/rbpNrY

相关问题