Question

我想创建一个带有多行标题的表，例如this example。

我找到了this post，但是答案不起作用。此外，我研究了Vuetify文档和Github问题，但似乎没有解决方案。

如果有人能让我知道这样的事情是否可行以及如何实现，那将是很棒的事情。

Answer 1

事实证明，只要在广告位模板中添加import turtle generations = 3 size = 10 rule = ("F", "FF+[+F-F-F]-[-F+F+F]") sentence = "F" positions = [] gen = turtle.Turtle() gen.speed(10) gen.left(90) for i in range(generations): sentence = sentence.replace(*rule) for op in sentence: if op == "F": gen.forward(size) elif op == "+": gen.right(size) elif op == "-": gen.left(size) elif op == "[": positions.append(gen.position()) elif op == "]": gen.setposition(positions.pop()) turtle.exitonclick()，您就可以在默认标题上方简单地实现自己的类别行。省略<thead>放在下面。

<thead>

Answer 2

您可能可以使用slot =“ headerCell”。请注意，此处使用的Vuetify版本为1.5.11

以下示例可能会为您提供一些提示：

<activationSpec id="app1/module1/MyMessageDrivenBean">

这是codepen链接：https://codepen.io/nizantz/pen/KYyLOp

希望对您有帮助。

（要提醒主持人，他删除了我以前的帖子：我不小心将答案贴错了一个问题，而我已经将其删除了。）

Answer 3

根据您的评论，这是另一个可以帮助您解决问题的示例请注意，数据结构必须采用正确的格式。（子元素）

Vue模板：

    <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

Answer 4

这是核心代码

<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

是否可以在Vuetify数据表中创建多行标题？

4 个答案: